React - Components Rendering Other Components

JavaScript
1

Hi FCC,

I’m currently tinkering with the recipe box come up and I’ve had a question arise.

I have an App component that looks like this:

//app.js
class App extends Component {
  render() {
    return (
      <div className="recipe-book">
        <RecipeContainer>
          <Recipe title="Spaghetti"/> 
        </RecipeContainer>
      </div>
    );
  }
}

Notice how RecipeContainer contains a Recipe component?

Currently RecipeContainer only returns a Div, like so

//RecipeContianer.js
class RecipeContainer extends Component {

    render(){
      return (
        <div className="recipe-container">
        </div>
      )
    }
}

When my App is rendered, I do not see my “spaghetti” recipe inside the div. All that RecipeContainer actually adds to the dom is an empty <div>. Now, I know that I am explicitly telling it to render an empty div, but because I have nested a Recipe component inside of the ReciepeContainer component in App.js why is this not respected?

I can get the behaviour I want with this code:

//app.js
class App extends Component {
  render() {
    return (
      <div className="recipe-book">
        <RecipeContainer/>
      </div>
    );
  }
}

  //RecipeContianer.js
  class RecipeContainer extends Component {

    render(){
      return (
        <div className="recipe-container">
           <Recipe title="Spaghetti"/>
        </div>
      )
    }
  }

BUT I feel like this sort of hides the relationships of all my elements in App.js (ie. you cant see that the recipe contianer has any recipe components inside of it).

Am I doing something wrong with my code to have this not work? Am I supposed to be “hiding” the relationships between components (like in my working code)? Just wondering if this is possible to do, and also what best practice would be…

Thanks everyone!

2

I’m not sure hiding is such a bad thing. Why should other (unrelated) components have to know all the details about what the recipe container is doing, in other words.

Anyway… to nest components, I think you’ll have to put a {this.props.children} in the parent component’s render.

class RecipeContainer extends Component {
    render(){
      return (
        <div className="recipe-container">RecipeContainer
          {this.props.children}
        </div>
      )
    }
}
1 Like
3

All of your individual components should just be concerned with rendering their own view. So, no its not a bad thing that app doesn’t know about the details of recipe.

If your RecipeContainer is just rendering a div why not just put the div inside app?

//app.js
class App extends Component {
  render() {
    return (
      <div className="recipe-book">
        <div className="recipe-container">
          <Recipe title="Spaghetti"/> 
        </div>
      </div>
    );
  }
}
1 Like
4

For your first example to work, you have to use the built-in children prop. So, change your RecipeContainer component to look something like:

import React from 'react';

class RecipeContainer extends React.Component {
 render() {
    return (
      <div className="recipe-container">
        {this.props.children}
      </div>
    );
  }
}

You can find a reference to this special prop in the React docs at:

Hope that helps.

Regards,
Bill

1 Like
5

Thank you everyone. This was all very helpful :slight_smile:

1 Like