title: React JS - How to access props in a child component which is passed from a parent component
body: <p>In my react application, I am passing my data from parent to child as props. In my child component, I am able to see the data in props however when I try to access the data, I am getting an error saying "cannot read property of undefined".</p>
  
  <p>I have written my child component like below-</p>
  
  <p>Child Component-</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { setData } from '../actions/action'
  import { connect } from 'react-redux'
  
  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 ChildAccordion = (props) =&gt; {
      console.log(props);
  
      return (
          &lt;Accordion&gt;
              &lt;AccordionItem&gt;
                  &lt;AccordionItemTitle&gt;
                  &lt;h3&gt; Details: 
                 { props?
                      props.map(d =&gt;{
                          return &lt;span&gt;{d.key}&lt;/span&gt;
                      })
                      :
                      ""
                 }
  
                  &lt;/h3&gt;
                      &lt;div&gt;With a bit of description&lt;/div&gt;
                  &lt;/AccordionItemTitle&gt;
                  &lt;AccordionItemBody&gt;
                      &lt;p&gt;Body content&lt;/p&gt;
                  &lt;/AccordionItemBody&gt;
              &lt;/AccordionItem&gt;
          &lt;/Accordion&gt;
      )
  };
  
  
  
  export default  ChildAccordion
  </code></pre>
  
  <p>Parent Component-</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import ChildAccordion from './ChildAccordion'
  import { setData } from '../actions/action'
  import { connect } from 'react-redux'
  
  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 {
  
      componentWillMount() {
        //call to action
        this.props.setData();
    }
  
    getMappedData = (dataProp) =&gt;{
        if (dataProp) { 
          let Data = this.props.dataProp.map(d =&gt;{
              console.log(d);
          })
        }
    }
  
  
      render(){
          const { dataProp } = this.props;
          return (
              // RENDER THE COMPONENT
                  &lt;Accordion&gt;
          &lt;AccordionItem&gt;
              &lt;AccordionItemTitle&gt;
                  &lt;h3&gt;Policy Owner Details: 
                 { dataProp?
                      dataProp.map(d =&gt;{
                          return &lt;span&gt;{d.key1}&lt;/span&gt;
                      })
                      :
                      ""
                 }
  
                  &lt;/h3&gt;
              &lt;/AccordionItemTitle&gt;
              &lt;AccordionItemBody&gt;
              &lt;ChildAccordion {...dataProp} /&gt;
              &lt;/AccordionItemBody&gt;
          &lt;/AccordionItem&gt;
      &lt;/Accordion&gt;
          );
      }
  }
  
  
  const mapStateToProps = state =&gt; {
      return {
          dataProp: state.dataProp
      }
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
    setData(data) {
      dispatch(setData(data));
    }
  })
  export default connect (mapStateToProps,mapDispatchToProps) (ParentAccordion)
  </code></pre>
  
  <p>I am using map function inside as my api response can be array of multiple objects.</p>