Can't dynamically render reactjs elements using .map()

Question

I am trying to dynamically render out ingredient/qty/measure using .map() in reactjs I am following a few tutorials online but unable to properly implement the code in my own code.

Here is the error I am currently getting:

react-dom.development.js:86 Warning: Functions are not valid as a React child. 
This may happen if you return a Component instead of <Component /> from render. 
Or maybe you meant to call this function rather than return it.

Here is the data I am trying to map over:

recipeIngredients: Array(2)
0: {name: 'lemon', quantity: '100', measure: 'g'}
1: {name: 'butter', quantity: '5', measure: 'cups'}

Here is my code:

import './IngredientsList.css'

let ingredientArray
function mapIngredients() {
  ingredientArray.map((item) => (
    <div className="ingredient-element">{item}</div>
  ))
}

function IngredientsList(props) {
  console.log(props)
  ingredientArray = props.recipeIngredients

  return <div className="ingredient-list">{mapIngredients}</div>
}

export default IngredientsList

Basically, trying to render out the following set of divs (recipeIngredients.name has an additional class):

<div className="ingredient-list">
    <div className="ingredient-element">recipeIngredients.quantity</div>
    <div className="ingredient-element">recipeIngredients.measure</div>
    <div className="ingredient-element ingredient-name">recipeIngredients.name</div>
  </div>

I notice that the () are missing from the IngredientList function - VSCode keeps deleting them when I save the code so I can't manually add them...

David · Accepted Answer · 2022-05-17 11:10:37Z

1

You forgot to invoke the function. Here you're trying to render the function itself:

return <div className="ingredient-list">{mapIngredients}</div>

Instead, invoke the function and render its result:

return <div className="ingredient-list">{mapIngredients()}</div>

Additionally, the function currently doesn't return anything. Add a return statement:

function mapIngredients() {
  return ingredientArray.map((item) => (
    <div className="ingredient-element">{item}</div>
  ))
}

answered May 17, 2022 at 11:10

David

221k42 gold badges245 silver badges337 bronze badges

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

3 Comments

deadant88 Over a year ago

Thanks for the response! Now the error I get is: Uncaught TypeError: ingredientArray.map is not a function

David Over a year ago

@deadant88: That suggests that ingredientArray is not an array. So what is it? You can log it to the console to see what it is.

deadant88 Over a year ago

Yes it is an object, I jst had to chnage {item} to {item.name}} etc. Thanks for the help! One last thing, if possible: how do I render a unique key for each item? What I am trying (just making key item.name etc is resulting in Warning: Each child in a list should have a unique "key" prop.

Yash · Accepted Answer · 2022-05-17 12:16:36Z

0

I'm seeing two issues here. First, you're not invoking the function(as you said that vs code is not letting you do that). The second is item is an object here. Try this instead:-

function IngredientsList(props) {
  console.log(props)
  ingredientArray = props.recipeIngredients || [];

  return (
    <div className="ingredient-list">
      {
        ingredientArray.map(item => (
          <div className="ingredient-element">{item.name}</div>
        ))
      }
    </div>
  )
}

answered May 17, 2022 at 12:16

Yash

3182 silver badges14 bronze badges

Collectives™ on Stack Overflow

Can't dynamically render reactjs elements using .map()

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related