Unable to pass array of objects from parent to Child component

by nishant   Last Updated September 12, 2019 02:26 AM

i am trying to pass array of objects (eventually will replace with axios call for the actual data ) from parent to Child component and further from one child to other child components , i am unable pass as i get error message saying "Objects are not valid as a React child (found: object with keys ). If you meant to render a collection of children, use an array instead."

/ABC.js

import React from 'react'
import ABCD from '../ABCD/ABCD'

const plans = [
  {
    id:'1',
    title:'option 1',
    value:'option1',
    name:'option'
  },
  {
    id:'2',
    title:'option 2',
    value:'option2',
    name:'option'
  }
]
const ABC = () => {
  return (
    <div>
      {
        plans.map( plan => {
          return(
            <ABCD data={plan} />
           );
        })
     }
    </div>

  );
}

export default ABC

//ABCD.JS

import React from 'react'

const ABCD = ({data}) => {
  return (
    <div>
      {data} //Here as of now data is being used , will be replaced by other child components 
    </div>
  );
}

export default ABCD

expected result should be the display of array of objects , but the actual output is error message saying "Objects are not valid as a React child (found: object with keys {id, title, value, name}). If you meant to render a collection of children, use an array instead."



Answers 2


If you want to send the data again down to any children do the same thing as you do in the parent component. Just be careful about rendering objects. You can't render objects directly, the error you got there is very clear. You need to render object's properties somehow.

const plans = [
  {
    id:'1',
    title:'option 1',
    value:'option1',
    name:'option'
  },
  {
    id:'2',
    title:'option 2',
    value:'option2',
    name:'option'
  }
]
const ABC = () => {
  return (
    <div>
      {
        plans.map( plan => {
          return(
            <ABCD data={plan} />
           );
        })
     }
    </div>

  );
}

const ABCD = ({data}) => {
  return (
    <div>
      <SecondChild data={data} />
      <ThirdChild value={data.value} />
    </div>
  );
}

const SecondChild = ({ data }) => 
  <div>{data.id}</div>
  
const ThirdChild = ({ value }) =>
  <div>{value}</div>

ReactDOM.render(<ABC />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

devserkan
devserkan
September 12, 2019 01:31 AM

data is an object and you can not rendered it as it is not a valid React Element.

So,in this case <div> {data} //Here as of now data is being used , will be replaced by other child components </div>, this will not work.

Instead simply do,

{
   data.map((dataObject)=><div>{dataObject.name}</div>)
}
RIYAJ KHAN
RIYAJ KHAN
September 12, 2019 02:25 AM

Related Questions





Convert a statement to ES5

Updated July 25, 2017 10:26 AM

Creating an untraditional form input for record edit

Updated February 21, 2017 21:26 PM