Modern JavaScript Web Development Cookbook

How to do it...

The component we want to create could have any kind of content. (The same idea would apply to generic dialog boxes, header sections, or sidebars, by the way.) Instead of creating a base class and using inheritance to create multiple derived classes, React allows you to pass a special children prop (this.props.children) so that you can pass children elements to the original component.

First, let's see how our ResultsDataTable code would change. First, the render() method would have to change:

render() {    if (this.props.results.length === 0) {        return <div className="bordered">No regions.</div>;    } else {        return (            <div className="bordered">                {this.props.results.map(x => (                    <ExpandableCard key={x.id} title={x.name}> <div>CITIES:{x.cities}</div> ...