React map function confusion

Question

I am a little confused with the map function when using it in a React Component. I have a Recipes Component that gets passed the recipes data from the App Component.

APP COMPONENT

<Recipes recipes={recipes} />

RECIPES COMPONENT

export default class Recipes extends Component {
  // THIS FUNCTION IS RETURNING NOTHING
  renderRecipes() {
    return this.props.recipes.map((recipe) => {
      <h1>{recipe.name}</h1>
    });
  }
  render() {
    let recipe = this.props.recipes.map((recipe) => {
      return (
        <h1>{recipe.name}</h1>
      );
    });
    return(
      <div>
        // CALLING THE FUNCTION HERE DOES NOT WORK
        { this.renderRecipes() }
        // HOWEVER CALLING THE VARIABLE DOES WORK
        { recipe }
      </div>
    );
  }
}

Here is where I am confused. Creating a function which does the map function returns nothing, however moving the map function and assigning the output to the recipe variable inside render() works fine. Why does the map function in renderRecipes return nothing?

not returning in map of renderRecipes

Ajay Narain Mathur
– Ajay Narain Mathur

2017-05-22 04:42:28 +00:00
Commented May 22, 2017 at 4:42 — Ajay Narain Mathur
– Ajay Narain Mathur, Commented May 22, 2017 at 4:42

Mayank Shukla · Accepted Answer · 2017-05-22 04:46:28Z

2

Because you are not returning anything inside map body, use it like this:

renderRecipes() {
    return this.props.recipes.map((recipe, i) => {
        return <h1 key={i}> {recipe.name} </h1>
    });
}

or remove the {}:

renderRecipes() {
    return this.props.recipes.map((recipe, i) => <h1 key={i}> {recipe.name} </h1> );
}

When {} is required with map?

When you want to do some calculation or want to return different elements on the basis of some condition then use {} to create a scope to define some variables and to use if conditions but here you just want to return a single element so {} is not required here.

Note: You need to assign unique key to each element, here i used index but i will suggest you to use any unique property of recipe object.

edited May 22, 2017 at 4:46

answered May 22, 2017 at 4:42

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AJDEV Over a year ago

That did it! Will accept when I can. I am guessing I will need the {} if I want to return multiple lines of html? Thanks

Collectives™ on Stack Overflow

React map function confusion

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related