Within the render method comments are allowed, but in order to use them within JSX, you have to wrap them in braces and use multi-line style comments. <div className=”dropdown”> {/* whenClicked is a property not an event, per se. */} <Button whenClicked={this.handleClick} className=”btn-default” title={this.props.title} subTitleClassName=”caret”></Button> <UnorderedList /> </div> You can read more about how comments … Read more
From headline‘ style remove height, justifyContent and alignItems. It will center the text vertically. Add textAlign: ‘center’ and it will center the text horizontally. headline: { textAlign: ‘center’, // <– the magic fontWeight: ‘bold’, fontSize: 18, marginTop: 0, width: 200, backgroundColor: ‘yellow’, }
The issue becomes extremely simple when you realize that an Angular service is just an object which delivers a set of context-independent methods. It’s just the Angular DI mechanism which makes it look more complicated. The DI is useful as it takes care of creating and maintaining instances for you but you don’t really need … Read more
There are a few ways to do this: 1) Get values from array of form elements by index handleSubmit = (event) => { event.preventDefault(); console.log(event.target[0].value) } 2) Using name attribute in html handleSubmit = (event) => { event.preventDefault(); console.log(event.target.elements.username.value) // from elements property console.log(event.target.username.value) // or directly } <input type=”text” name=”username”/> 3) Using refs handleSubmit … Read more
This is a confusion between constructors and instances. Remember that when you write a component in React: class Greeter extends React.Component<any, any> { render() { return <div>Hello, {this.props.whoToGreet}</div>; } } You use it this way: return <Greeter whoToGreet=”world” />; You don’t use it this way: let Greet = new Greeter(); return <Greet whoToGreet=”world” />; In … Read more
I’m encountering a similar issue and found two solutions that work as far as viewing the application directly in a browser ngrok http 8080 –host-header=”localhost:8080″ ngrok http –host-header=rewrite 8080 obviously, replace 8080 with whatever port you’re running on this solution still raises an error when I use this in an embedded page, that pulls the … Read more
You need to use useEffect hook to achieve this. const [counter, setCounter] = useState(0); const doSomething = () => { setCounter(123); } useEffect(() => { console.log(‘Do something after counter has changed’, counter); }, [counter]); If you want the useEffect callback to be ignored during the first initial render, then modify the code accordingly: import React, … Read more
If you want a short snippet without any external dependencies I find this useful componentDidUpdate(prevProps, prevState) { Object.entries(this.props).forEach(([key, val]) => prevProps[key] !== val && console.log(`Prop ‘${key}’ changed`) ); if (this.state) { Object.entries(this.state).forEach(([key, val]) => prevState[key] !== val && console.log(`State ‘${key}’ changed`) ); } } Here is a small hook I use to trace updates to … Read more
size: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), Learn more: Typechecking With PropTypes
Every time I run npm start, it overrides whatever I configure in {jsx: …} with react-jsx in order to be compatible with JSX transform in React 17. The following changes are being made to your tsconfig.json file: – compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17) The problem is VSCode … Read more