Mapping data from array in child component and parent component

Question

I have data stored in data.js file in array. I am showing that data in Child component (only the first object in array). I want to map through same array in parent component (by rendering <ChildComponent> ). How can I do that?

data.js

export default {
  accordionItems: [
    {
      id: 1,
      title: 'Why is my car not green?',
      answer: 'We ran out of green color',
    },
    {
      id: 2,
      title: 'Where have all the drivers gone?',
      answer: 'It\'s lunch time',
    },
    {
      id: 3,
      title: 'Do you have a book of complains',
      answer: 'You can write at info@mail.eu',
    },
  ],
};

child component

import Data from './data';

class AccordionItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: Data.accordionItems[0], //if I remove [0], no data is rendered
    };
  }

 return (
    <div >
      <div>
        <p>{question.title}</p>
        <button>toggle</button>
      </div>
      <p>{question.answer}</p>
      <hr />
    </div>
 );

Parent Component

import AccordionItem from './AccordionItem';
import Data from './data';


class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      accordionItems: Data.accordionItems,
    };
  }
render() {
    const { accordionItems } = this.state;
    return accordionItems.map(accordionItem => (
      <AccordionItem key={accordionItem.id} />

I want to get all 3 objects from 'data' array in Parent component, now I am getting 3 same components with just first object.

Answer 1

Pass the item down as props:

 <AccordionItem question={accordionItem} ... />

The you can access it in the render() method:

render() {
 const { question } = this.props;

 return (
   <div >
     <div>
       <p>{question.title}</p>
       <button>toggle</button>
     </div>
     <p>{question.answer}</p>
   </div>
 );
}

You shouldn't use the state at all (yet).

Answer 2

You can simply pass data from map function itself like:

accordionItems.map(accordionItem => (
      <AccordionItem
        key={accordionItem.id}
        open={[`isOpen-${accordionItems.id}`]}
        data={accordionItem}
      />
));

And in the Child:

class AccordionItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: props.data, //data from map function in parent
    };
  }

Answer 3

Maybe you should read a bit more about components and passing props in React.

What you could do to make this work is instead of importing Data in your AccordionItem component, you pass it down to the AccordionItem via props.

This would look something like this:

import AccordionItem from './AccordionItem';
import Data from './data';


class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      accordionItems: Data.accordionItems,
    };
  }

  render() {
    const { accordionItems } = this.state;
    return accordionItems.map(accordionItem => (
        <AccordionItem
          key={accordionItem.id}
          item={accordionItem}
          open={[`isOpen-${accordionItems.id}`]}
        />
    ))
  }

Now the item should become accessible via props in the child component:

 class AccordionItem extends Component {

   render(){
     const { question } = this.props
     return (
       <div >
         <div>
           <p>{question.title}</p>
           <button>toggle</button>
         </div>
         <p>{question.answer}</p>
         <hr />
       </div>
     );
   }