How to scatter over REACT components?

Question

JavaScript

Actually there is a Todos component

render() {
  const { data: { loading, error, todos } } = this.props;
  if (loading) {
    return <p>Loading...</p>;
  } else if (error) {
    return <p>Error!</p>;
  } else {
    return (
      <ul>
        {todos.map(({ id, text }) => (
          <li key={id}>{text}</li>
        ))}
      </ul>
    );
  }
}

How to make it so that there would be 3 components Error, Loading, Todos, while Error and Loading would "disappear" as soon as their status changes to false (well, they appear when true, respectively).
PS This should be done because there will be many similar components and I don't want to duplicate the Error and Loading... codes.

Answer 1

const Error=()=>{
<div><p>Error!</p></div>
}
const Loading=()=>{
<div><p>Loading...</p></div>
}
const Todos=()=>{
<div><ul>
        {this.props.todos.map(({ id, text }) => (
          <li key={id}>{text}</li>
        ))}
      </ul></div>
}
render() {
  const { data: { loading, error, todos } } = this.props;
  if (loading) {
   <Loading>
  } else if (error) {
   <Error> 
  } else {
    return (
      <Todos todos={todos }>
    );
  }
}