[Solved]-React JS - How to access props in a child component which is passed from a parent component-Reactjs

Once you know what the prop that you're passing in is called, you can access it like so from within your child component: {props.data.map(item => <span>{item.something}</span>}

const Parent = () => {
  return (
     <Child data={[{ id: 1, name: 'Jim' }, { id: 2, name: 'Jane ' }]} />
  );
}

const Child = (props) => {
  return (
    <ul>
      {props.data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

You are passing dataProp down to ChilAccordian as a prop. So in Child component you should access it using props.dataProp and do map on props.dataProp but not on props directly

ChildAccordian:

  <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map(d =>{
                    return <span key={d.id}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

Also keep in mind that you have to add unique key to parent Jsx element when you generate them in loop like for loop, .map, .forEach, Object.keys, OBject.entries, Object.values etc like I did in the above example. If you don’t get unique id from the data then consider adding index as unique like

      <h3> Details: 
           { Array.isArray(props.dataProp) && props.dataProp.length > 0 ?
                props.dataProp.map((d, index) =>{
                    return <span key={"Key-"+index}>{d.key}</span>
                })
                :
                ""
           }

            </h3>

Edit: If it is an object then do something like below and regarding using a method to generate jsx elements

getMappedData = dataProp =>{
   if(props.dataProp){
            Object.keys(props.dataProp).map(key =>{
               return <span key={"Key-"+key}>{props.dataProp[key]}</span>
            });
   }else{
       return "";
    }
  }

   <h3> Details: 
          {this.getMappedData(props.dataProp)} 
   </h3>