Lesson 1 of 8
State in one place
- 14 min
- 5 checks
- 3 hints
- Go to task
Goal
Change the state and the UI follows
01
Explanation
The surest way to wreck a UI is to change the DOM from ten different places: you add an element here and remove some text there, and soon nobody knows what the page's real state is.
The alternative is a single rule: one object holds the state, and one function draws it on the page. Every event changes the state and then calls render(), and it never touches the page itself.
This is the idea React and libraries like it are built on, but it doesn't take a library, just the discipline to stick to the rule.
02
Your task
Write the render() function so it draws state.items, and make the button add an item to the state and then re-render.
Checks
5 checks- The list shows the two items in the state
- The counter matches the number of items in the state
- Adding grows the list and the counter together
- The state itself grows, not just the DOM
- The render function is defined and can be called on its own