And each todo should toggle its line-through property value when clicked.The input fields will need a button to add the newly typed todo.A new todo should not be an empty string.The todo list component will need an input field to create new todos.Create two todo list components, one as a class and one as a function.Then start the application from the root directory: cd class-and-function-todos npm start We’ll also install classnames for some styling purposes towards the end: npm install classnames To start, we can create our app with create-react-app: npx create-react-app class-and-function-todos So this article will be brushing-up on class components, a necessary and expected skill of any React developer, and will aim to make a todo list app that utilizes both class and function components.

However, embarrassment can be a good motivator. I was recently confronted with my rather rusty knowledge of React class components, mostly due to the fact that I opt for function components 99% of the time. Always a good “go-to” when trying out a new library or front end framework. This simple app idea lovingly directs our attention towards persistent data (at least locally) and several possibilities of conditional rendering. The Todo List… Maybe the most basic, self contained, proof-of-concept, nearly quintessential app implementation.

Todo list teams