Having a bit of trouble passing props down from a parent ponent to a child ponent with es6.

// Parent ponent
const Carousel = () => (
  <nav className="projects-nav">
    <div className="projects-nav__wrapper">
      <CarouselItem
        title="Mowat"
        client="Jon Mowat"
        image="/images/mowat.jpg"
        icon="images/icons/video.svg"
        url="/mowat.html"
      />
    </div>
  </nav>
);

// Child ponent
const CarouselItem = () => (
  <div className="project project--mowat">
    <Letter />
    <Title />
    <Description />
  </div>
);

// Child ponent where prop is inserted
const Title = ({ title }) => (
  <a href="/mowat.html" className="project__title">
    <h2>{title}</h2>
  </a>
);

Having a bit of trouble passing props down from a parent ponent to a child ponent with es6.

// Parent ponent
const Carousel = () => (
  <nav className="projects-nav">
    <div className="projects-nav__wrapper">
      <CarouselItem
        title="Mowat"
        client="Jon Mowat"
        image="/images/mowat.jpg"
        icon="images/icons/video.svg"
        url="/mowat.html"
      />
    </div>
  </nav>
);

// Child ponent
const CarouselItem = () => (
  <div className="project project--mowat">
    <Letter />
    <Title />
    <Description />
  </div>
);

// Child ponent where prop is inserted
const Title = ({ title }) => (
  <a href="/mowat.html" className="project__title">
    <h2>{title}</h2>
  </a>
);

Do I need to pass the prop from the Carousel to the CarouselItem then to the Title ponent?

• javascript
• reactjs
• ecmascript-6

3 Answers 3

The answer is yes.

With React 16.2 and before, you have to explicitly pass props down the ponent tree to reach a ponent descendant.

const CarouselItem = ({ title }) => (
  <div className="project project--mowat">
    <Letter />
    <Title title={title} />
    {/*    ^^^^^^^^^^^^^ pass prop to grandchild */}
    <Description />
  </div>
);

Starting from React 16.3, you can use the ContextApi to skip this and inject state to designate ponents and circumvent the actual ponent tree.

This functionality is also available with libraries like Redux or Mobx which take advantage of the unofficial context api (not the same as the one ing out in 16.3).

Yes, the most straight-forward way would be to pass the prop through CarouselItem as you say.

const CarouselItem = (props) =>
    <div className="project project--mowat">
        <Letter />
        <Title title={props.title} />
        <Description />
    </div>

However, doing this multiple levels deep can get a little unwieldy, and has even gotten the name "prop drilling". To solve that, a new context API is being added in React 16.3, which allows passing data down through multiple levels. Here's a good blog post about that.

use spread operator {...props}

const CarouselItem = (props) => (
  <div className="project project--mowat">
    <Letter />
    <Title {...props}/>
    <Description />
  </div>
);

CarouselItem is parent and Title is child recieving all props from parent