title: How to iterate over all the objects received as props from its parent in React JS
body: <p>I am using react-accessible-accordion. I want to populate the innermost child component with the data received as props from the parent component. </p>
  
  <p>To do so, I am doing something like below in my respective components:</p>
  
  <p>Parent Component —</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import ChildAccordion1 from './ChildAccordion1'
  
  
  import {
      Accordion,
      AccordionItem,
      AccordionItemTitle,
      AccordionItemBody,
  } from 'react-accessible-accordion';
  
  
  import 'react-accessible-accordion/dist/fancy-example.css';
  import 'react-accessible-accordion/dist/minimal-example.css';
  
  
  class ParentAccordion extends React.Component {
  
     getMappedData = () =&gt;{ 
      const myObj = [
          {"Name":"John Doe", "City": "Chicago","ID":1,"address": "207 Mills Town"},
          {"Name":"Ramph Brown", "City": "LA","ID":2,"address":"508 Mills Town"}
      ];
        if (myObj) { 
           return myObj.map(item =&gt;{
               console.log(item);
              return (
                  &lt;Accordion&gt;
                      &lt;AccordionItem&gt;
                          &lt;AccordionItemTitle&gt;
                          &lt;/AccordionItemTitle&gt;
                          &lt;AccordionItemBody&gt;
                          &lt;ChildAccordion1 {...item} /&gt;
                          &lt;/AccordionItemBody&gt;
                      &lt;/AccordionItem&gt;
                  &lt;/Accordion&gt;
              )
          })
        }
        else {
            return "";
        }
    }
  
  
      render(){
          return (
              // RENDER THE COMPONENT
              &lt;div&gt;
                  {this.getMappedData()}
              &lt;/div&gt;
          );
      }
  }
  
  
  
  
  export default ParentAccordion
  </code></pre>
  
  <p>Here, if you see I am passing only item as props to my child component i.e only objects.</p>
  
  <p>Child Component1 —</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import InnerMostChildComp from './InnerMostChildComp'
  
  import {
      Accordion,
      AccordionItem,
      AccordionItemTitle,
      AccordionItemBody,
  } from 'react-accessible-accordion';
  
  
  import 'react-accessible-accordion/dist/fancy-example.css';
  import 'react-accessible-accordion/dist/minimal-example.css';
  
  
  class ChildAccordion1 extends React.Component {
  
      render(){
          const propToChild = this.props;
          return (
              // RENDER THE COMPONENT
              &lt;Accordion&gt;
          &lt;AccordionItem&gt;
              &lt;AccordionItemTitle&gt;
              &lt;/AccordionItemTitle&gt;
              &lt;AccordionItemBody&gt;
                  &lt;table className="accordionTable"&gt;
                      &lt;thead className="row"&gt;
                          &lt;th className="col-sm-6"&gt;Name&lt;/th&gt;
                          &lt;th className="col-sm-6"&gt;City&lt;/th&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr className="row"&gt;
                              &lt;td className="col-sm-6"&gt;Name&lt;/td&gt;
                              &lt;td className="col-sm-6"&gt;City&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;InnerMostChildComp propFromParent = {propToChild}/&gt;
              &lt;/AccordionItemBody&gt;
          &lt;/AccordionItem&gt;
      &lt;/Accordion&gt;
          );
      }
  }
  
  export default  ChildAccordion1
  </code></pre>
  
  <p>InnerMost Child Component —</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import {
      Accordion,
      AccordionItem,
      AccordionItemTitle,
      AccordionItemBody,
  } from 'react-accessible-accordion';
  
  import 'react-accessible-accordion/dist/fancy-example.css';
  import 'react-accessible-accordion/dist/minimal-example.css';
  
  const InnerMostChildComp = (props) =&gt; {
    return (
      &lt;Accordion&gt;
          &lt;AccordionItem&gt;
              &lt;AccordionItemTitle&gt;
                  &lt;h4&gt;List&lt;/h4&gt;
              &lt;/AccordionItemTitle&gt;
  
              &lt;AccordionItemBody&gt;
                  &lt;table className="accordionTable"&gt;
                      &lt;thead className="row"&gt;
                          &lt;th className="col-sm-2"&gt;Name &lt;/th&gt;
                          &lt;th className="col-sm-2"&gt;City &lt;/th&gt;
                          &lt;th className="col-sm-2"&gt;Id &lt;/th&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;
                          {
                              Object.keys(props.propFromParent).map((key, index) =&gt; {
                                  console.log(key, index);
                                 return (
                                  &lt;tr className="row"&gt;
                                      &lt;td className="col-sm-2"&gt;{props.propFromParent[key].Name}&lt;/td&gt;
                                      &lt;td className="col-sm-2"&gt;{props.propFromParent[key].City}&lt;/td&gt;
                                      &lt;td className="col-sm-2"&gt;{props.propFromParent[key].Id}&lt;/td&gt;
                                  &lt;/tr&gt; 
                                 )
                              })
                          }  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/AccordionItemBody&gt;
          &lt;/AccordionItem&gt;
      &lt;/Accordion&gt;
    )
  };
  
  export default  InnerMostChildComp
  </code></pre>
  
  <p>I want each <code>tr</code> to have the selected attributes from the objects index wise so to do so, I am using <code>Object.keys</code> as the props we get in child is always a component. </p>
  
  <p>Problem I am facing is that in my InnerMostChildComp, in my props.propsfromParent, I get first object of an array i.e object related to ID 1 and then when I put debugger on td, it appears that instead of iterating through the number of objects I have in my array which is 2, it is iterating over all the individual attributes(keys and values) of my first object and it prints all the keys and values. Then the control goes back again to props.propsfromParent where my second object is displayed and again the iteration happens inside the same object over the keys and values which is not what I want. For instance, when I debug my InnerMostChildComp, Object.keys iterates over each attributes of the first object instead of iterating over both the objects. My props.propFromParent does show the second object after the iteration of first object gets completed.Probably I am not using the Object.keys right way or the problem is with my props.propFromParent.</p>