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 }>
);
}
}