React - Components Rendering Other Components

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