JavaScript by Example

Using child components

Let's take a look at the ErrorMessage component, which I have created to show an error message when we are unable to retrieve posts from the server. This is how the ErrorMessage component is included in the render method:

<ErrorMessage title={'Error!'} message={'Unable to retrieve posts!'} />

If the ErrorMessage is a stateful component created by extending the Component interface. The attributes of the ErrorMessage JSX element title and message will then become the props of the children ErrorMessage component. However, if you look at the implementation of the ErrorMessage element, you will see that it is a stateless functional component:

const ErrorMessage = ({title, message}) => ( <div className="alert alert-danger"> ...