Hands-On Full-Stack Web Development with GraphQL and React

Rendering child components

In all of the code that we have written so far, we have directly written the markup like it is rendered to real HTML.

A great feature that React offers is the ability to pass children to other components. The parent component decides what is done with its children.

Something that we are still missing now is a good error message for our users. So, we will use this pattern to solve the issue.

Create an error.js file next to the loading.js file in the components folder, as follows:

import React, { Component } from 'react';export default class Error extends Component {  render() {    const { children } = this.props;        return (      <div className="error message">        {children}      </div>    );  }}

When passing children to another component, ...