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 following screenshot for a trial run, showing some expanded and condensed cards:

What's going to be the content of the expanded card? This is where this.props.children comes in. Whatever elements were provided as props will be rendered here. In this way, you can reuse your ExpandableCard with any type of content. The main characteristics (the title, the triangle to expand/condense the card) will always be there, but thanks to the use of composition, you'll be able to have as many versions of expandable cards as you may need.