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.

CodePudding user response：

Need to decompose the props. change this

 const RecipeListContainer = (title, recipeSample) => {

to

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