reactjs - Calling a component inside another component (React)

Question

I'm new to React and I'd like to understand how you can call a component inside another component. I have a component folder which contains a RecipeCard.js:

import React,{Component} from 'react';
import { Ingredients } from './Ingredients';

export class Recipe extends Component {
    render() {
      return <div class="recipecard">
          <p class="texterecipecard">
              Recette: {tartetomate.props.name}, <br/>
              Difficulté: {tartetomate.props.difficulty},<br/>
              Vous aurez besoin de {Ingredients}.<br/> {tartetomate.props.recette}
          </p>
      </div>;
      
    }
  };

  const tartetomate = <Recipe name="Tarte tomate" difficulty="Moyenne" ingredients= {Ingredients} recette="Mélanger les ingrédients dans un moule, faire cuire le tout à 190 degrés pendant 20 min." />

When I try to call {Ingredients} inside the render part of my Recipe component, it does not work, there are no errors with eslint but it simply does not render. It leaves a blank. {Ingredients} refers to another component in a Ingredient.js file that simply renders a paragraph.

Why does this not work and how can I make it work?

Answer 1

Components vs. Elements

Ingredients is a React component, which is a JS-class or JS-function.

These are not valid as a React child, and are not rendered, plus you should get a warning in the console, like:
Warning: Functions are not valid as a React child ...

You need to insert a React element instead of a React component), e.g.:

class Ingredients extends Component {
    render(){
        return <p>(content of Ingredients)</p>
    }
}

export class Recipe extends Component {
    render() {
        return <div>
            <p>
                Vous aurez besoin de <Ingredients />.<br/>
            </p>
        </div>;
    }
}

A React element is an Object, returned by e.g. React.createElement( Ingredients ), or by using the equivalent JSX syntax <Ingredients />

Passing props

You should not access your global tartetomate.props from inside Recipe. Instead use the props of Recipe to pass the values, e.g.:

export class Recipe extends Component {

    constructor(props) {
        super(props);    // assure this.props works correctly
    }

    render() {
        return <div>
            <p>
                Recette: { this.props.name }, <br/>
                Difficulté: { this.props.difficulty },<br/>
                Vous aurez besoin de <Ingredients/>.<br/> { this.props.recette }
            </p>
        </div>;
    }
}

Using the Component

Then you can add the Recipe inside another component, like:

export class RecipeWithValues extends Component {
    render(){
        return <Recipe
            name="Tarte tomate"
            difficulty="Moyenne"
            ingredients={ Ingredients }
            recette="Mélanger les ingrédients dans un moule, faire cuire le tout à 190 degrés pendant 20 min."
        />;
    }
}

tartetomate

Your tartetomate is a React element already, created by the JSX syntax <Recipe ... />, stored in the global scope. That looks like bad style, and you probably don't need it, because you can use <Recipe ... /> directly.

But if you need it for some reason, you could use it like:

const tartetomate = <Recipe
    name="Tarte tomate"
    difficulty="Moyenne"
    ingredients={ Ingredients }
    recette="Mélanger les ingrédients dans un moule, faire cuire le tout à 190 degrés pendant 20 min."
/>;

export class RecipeWithValues extends Component {
    render(){
        return <div>{ tartetomate }</div>;
    }
}