Passing an object array to child component

Question

I am working on the front-end of a bootcamp project and I am having an issue when passing an object array to a child component.

For now, I am creating a variable array to test components. When using a map on the array in the parent component it works fine, but when passing the array to the child component and then using map function on it I get an error : arr.map is not a function.

Parent component :

import React from 'react'
import BottomNav from '../components/BottomNav'
import RecipeListContainer from '../components/RecipeListContainer'

const UserHome = () => {
    let recipeSample = [{id: 1,title: "Crispy pork belly lechon", category: "Filipino classics", author:"Alex"}, {id: 2,title: "Beef brocolli with scallions", category: "Chinese classics", author:"Wu Han"}];
    
  return (
    <div>
      <RecipeListContainer title="Featured recipes" recipeSample={recipeSample}/>
      <BottomNav selected="explore"/>
    </div>
  )
}

export default UserHome

Child component

import React from 'react'
import classes from './recipeListContainer.module.scss'

const RecipeListContainer = (title, recipeSample) => {
  return (
    <div className={classes.container}>
        <h1 className={classes.listTitle}>{title}</h1>
        {recipeSample.map((recipe) => (
            <div key={recipe.id} className={classes.recipeCard}>
                <div className={classes.recipeImage}></div>
                <div className={classes.recipeDescription}>
                    <h4>{recipe.title}</h4>
                    <p>{recipe.category}</p>
                    <p>Created by : {recipe.author}</p>
                    <button type="button">Remove from menu</button>
                </div>
            </div>
        ))}
    </div>
  )
}

export default RecipeListContainer

I am not sure what I am doing wrong, and when comparing to a working versions of a similar feature (from a different project) it seems I am not missing anything.

Sachila Ranawaka · Accepted Answer · 2022-11-20 14:47:18Z

1

Need to decompose the props. change this

 const RecipeListContainer = (title, recipeSample) => {

to

  const RecipeListContainer = ({title, recipeSample}) => {

answered Nov 20, 2022 at 14:47

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Passing an object array to child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related