Daman Arora

Using a List to Render Multiple React Components

You can build collections of elements and include them in JSX using curly braces {}. Below, we loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItems: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); Then, we can include the entire listItems array inside a <ul> element:...

Remember Data Down Action Up in React

“Data down, Action up” This phrase helps developers understand the flow of information from parent to child component and vice versa. The first and more simple concept, “data down,” refers to the passing of data and/or functions via props from parent to child components. These props are passed down when a child component gets created. We pass data down to child components so they can render them on to the DOM....

Two Way Data Binding in React

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> ); } }

Using Composition to Contain Children Components

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!...

Updating State That Depends on Previous State Using Callback

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 => [....