Step 2

Title

First create yout Title component. Since this is a stateless component you can use a simple function that returns JSX.

Try using children to be able to call your component as following in your render() function in App.js:

import Title from '../Title';
...
render () {
  return (
    <div>
      <Title>
        Product Page
      </Title>
    </div>
  );
}

⚠️ Don't forget to import your component at the begining of App.js with: import Title from '../Title'; and to export default your function or your class in your Title component.

ProductList

Now that you have your title, create a component to render the list of products. Here is the expected API:

import Title from '../Title';
import ProductList from '../ProductList';
...
render () {
  return (
    <div>
      <Title>
        Product Page
      </Title>

      <ProductList products={products} />
    </div>
  );
}

Last updated