Posts

Two way data binding means: The data we changed in the view has updated the state. The data in the state has updated the view. Following code block implements the two way binding in react: class UserInput extends React.Component { state = { name: "reactgo", }; handleChange = (e) => { this.setState({ name: e.target.value, }); }; render() { return ( <div> <h1> {this.state.name} </h1> <input type="text" onChange={this.handleChange} value={this.state.name} /> </div> ); } }

Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”. For such components, we can use the special children prop to pass children elements directly into their output: function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); } This lets other components pass arbitrary children to them by nesting the JSX: function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft!...

When the new state is calculated using the previous state, you can update the state with a callback: const [state, setState] = useState(initialState); // changes state to `newState` and triggers re-rendering setState(prevState => nextState); // after re-render `state` becomes `newState` Some more examples: // Toggle a boolean const [toggled, setToggled] = useState(false); setToggled(toggled => !toggled); // Increase a counter const [count, setCount] = useState(0); setCount(count => count + 1); // Add an item to array const [items, setItems] = useState([]); setItems(items => [....

Naming things (= variables, properties, functions, methods, classes) correctly and in an understandable way is an extremely important part of writing clean code. Be Descriptive Names have one simple purpose: They should describe what’s stored in a variable or property or what a function or method does. Or what kind of object will be created when instantiating a class. If you keep that in mind, coming up with good names should actually be straightforward - though coming up with the best name for a given variable/ property/ function/ … will of course still require some practice and often multiple iterations....

An important aspect of testing is to achieve good code coverage. This means, that you want to write tests for the majority of your code (both code files and line of code). There are tools that help you measure your code coverage - Testing library, Vitest comes with a built-in functionality: https://vitest.dev/guide/features.html#coverage It is worth noting though, that the goal is not necessarily 100% coverage. There always can be some code that doesn’t need any tests (e....