Learn React Hooks

Making the TodoList component dynamic

The next component in our ToDo app is the TodoList component. Here, we just need to get the todo items from the StateContext.

Let's make the TodoList component dynamic now:

1. In src/TodoList.js, we first import the StateContext, below the TodoItem import statement:

import StateContext from './StateContext'

2. Then, we set the contextType to the StateContext, which will allow us to access the context via this.context:

export default class TodoList extends React.Component {    static contextType = StateContext

With class components, if we want to use multiple contexts, we have to use the StateContext.Consumer component, as follows: <StateContext.Consumer>{value => <div>State is: {value}</div>}</StateContext.Consumer> ...