Learn React Hooks

Making the AddTodo component dynamic

After making our App component dynamic, it is time to make all of our other components dynamic as well. We are going to start from the top, with the AddTodo component.

Let's make the AddTodo component dynamic now:

1. In src/AddTodo.js, we first define a constructor, which sets the initial state for the input field:

export default class AddTodo extends React.Component {    constructor (props) {        super(props)                this.state = {            input: ''        }    }

2. Then, we define a method for handling changes in the input field:

    handleInput (e) {        this.setState({ input: e.target.value })    }

3. Now, we are going to define a method that can handle a new todo item being added:

    handleAdd () {        const { input } = this.state const { addTodo ...