If we delete all of our todos, we no longer see anything. If we want to tell our user there are no todos in the list when the array is empty, let’s head up to our TodoList component. Then, within handleDeleteTodo, we can call it and use the inner function to get the previous todos. To remove the todo that a user has clicked on, we can filter through this array to make sure that we are removing the one that the user selected.
You should also have some experience with the new JavaScript features introduced in ECMAScript 6 (ES6), you will learn about them in the React ES6 chapter. To learn and test React, you should set up a React Environment on your computer. To delete a todo, we want to be able to click on it and show a confirmation dialog. If the user confirms they want to delete it, only then is the todo removed. The final bit of functionality that we’re looking for is to be able to delete a given todo. Whenever we submit a form, by default, the page is refreshed.
How to Prevent Default Form Behavior
Promises traditionally use callbacks to resolve our asynchronous code. We use the .then() callback to resolve successfully resolved promises, while we use the .catch() callback to resolve promises that respond with an error. Note that it is especially concise when used in combination with an arrow function. It essentially works opposite to the && operator. If the first operand is true, the first (falsy) operand is returned.
You’ll find the main index.js file that serves as the entry point for your React application. You can start editing this file and other components to build your application. React is a JavaScript library for building user interfaces. Note that any re-render within a parent component will cause any child components to re-render. That means whenever our todo data is updated, the TodoList component (a child of the App component) is updated with that new data.
JSX cannot be understood by the browser
Before the arrival of ES6, to add strings together you needed to use the + operator to add each string segment to one another. I publish programming tutorials every day on my website flaviocopes.com if you want to check out more great content like this. Learn how to apply CSS in a React application, with plain CSS or Styled Components. Learn how to perform conditional rendering, how to perform loops in JSX, how to use the React Developer Tools. Learn more theory about the Virtual DOM, writing declarative code, unidirectional data flow, immutability, composition.
Using an arrow function, we can return each todo within its own JSX. Props are custom attributes we can add to React components to pass data to our components. They are the React equivalent of arguments in JavaScript. We need to return something, specifically some JSX.
Learn TypeScript
You do not need to have taken Bob’s original React course. In this example, the App component nests two Greeting components, resulting in a UI that displays greetings for both Alice and Bob. If you’re looking for answers to any of these questions (and more), this React by Example Lessons simple, comprehensive guide was made for you. Very Interactive extremely helpful in making sure we use what we learn in real life scenarios and some pretty good coding practices are also touched upon. Learn Redux Toolkit to manage global state within our app.