passing array of objects from parent component to child component-CodePudding

In this code Posts component has to pass an array of objects = "posts" to the child Post component. I am trying to pass objects individually to the Post component using .map function.

Problem is in the Posts component I am getting an error on this line

 posts.map(post=>(<Post post = {post} setCurrentId = {setCurrentId}/>))

its giving an error posts.map is not a function, I have console logged "posts" in the same component and its coming out as array of objects as it should be, but the above does not work for some reason, I am attaching a screen shot of the console error, please check

I'm also not sure why is Posts component is rendered twice, I has logged a statement in each component to check the flow.

Overall Post component is not rendering at all. Issue is with passing array of objects from Posts component.

I have looked at other questions Passing data from Parent Component to Child Component

How to pass Array of Objects from Parent Component to Child Component in react

before asking this question plus I have searched a lot online for solution

COMPONENT

import React from "react";
import Post from "./Post/Post";
import { useSelector } from "react-redux";
import "./Posts.css";

const Posts = ({ setCurrentId }) => {
    // var fork  = {}
    const posts = useSelector((state) => state.posts);

    console.log('This is a Post\'s Component')

 
    console.log(posts);

    return (
     <div className="outer">             
         {
          posts.map(post=>(<Post post = {post} setCurrentId = {setCurrentId}/>))
          }
      </div>
         )
}

export default Posts;

component

import React from 'react'
import box from '../../../assests/box.png'
import moment from 'moment'
// import FileBase from 'react-file-base64'
// import { Icon } from 'semantic-ui-react'
import './Post.css'



function Post({ post, setCurrentId }) {
  console.log('This is a POST Component')
  // ui card 
  // console.log(post._id);
  console.log(post)
  return (
    <div className="post-block">   
    
          <div className="image" href="#">
          <img src={box} alt=" missing" />
          <button onClick={() => setCurrentId(post._id)}><i className="edit icon"></i></button>
          <button onClick={() => { }}><i className="close icon"></i></button>
          </div>

          <div className="content">
          <p className="header name"><span>Name : </span> {post.name}</p>
          <p className="description"><span>Description : </span> {post.description}</p>
          <p className="created"><span>Created At : </span>{moment(post.createdAt).calendar()}</p>
          <p className="file"><span>File:</span>{post.csvFile}</p>
          </div>
          
        </div>
  )
}

export default Post

CodePudding user response：

Props is an object, not the exact value you were expecting

import React from 'react'

/// change this line
function Child({person}) {

    // console.log(person)
    
  return (
    <div >
      <h1>{person.Name}</h1>
    </div>
  )
}

export default Child

In your code, function Child(person) this person, is an object containing the props you pass like, for example Child(person={person} someData={someData})

so, person param in function will be

{
   person: person,
   someData: someData
}

CodePudding user response：

If you console.log person in child component you will get person: { person: { name, id ,place }} because first parameter will get all the props from parent.

so instead of doing this --> function Child(person)

you can do something like this --> function Child({person}) so this will destructure your prop object & you will get your person object!