How it works...
When this object is rendered for the first time, this.state.open is false, so the .render() method will just produce the title of the card, plus a triangle pointing down, to suggest that the card may be expanded by clicking on it. When the user clicks on the triangle, this.setState() is called with a function that will take the current value of this.state.open, and toggle it. React will decide whether the object needs to be re-rendered (because of the change in state) and this time, since this.state.open will be true, the expanded, complete version of the card will be rendered. In particular, the triangle will be shown pointing up, so the user will understand that the card will be condensed if they click there. Check out the ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access