How to use ES6 map function in React stateless component

Question

In my React application, I have an array of objects which I get through an api response. I want to display each object detail in an accordion. I am using react-accessible accordion and have created a React Stateless Component. I want each of my accordion to represent one object of the array. I have my array of objects in dataProp and to iterate over that I have written my component like below-

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) =>{
      if (dataProp) { 
         return dataProp.map(item =>{
            return <div>{dataProp[item]}</div>
        })
      }
      else {
       return "";
      }
}

    render(){
        const { dataProp } = this.props;
        return (
            // RENDER THE COMPONENT
                <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Details: 
               { 
                this.getMappedData(item[name])
               }

                </h3>
            </AccordionItemTitle>
            <AccordionItemBody>
            <ChildAccordion {...dataProp} />
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
        );
    }
}


const mapStateToProps = state => {
    return {
        dataProp: state.dataProp
    }
};

const mapDispatchToProps = dispatch => ({
  setData(data) {
    dispatch(setData(data));
  }
})
export default connect (mapStateToProps,mapDispatchToProps) (ParentAccordion)

While doing so, this gives me error-

Uncaught ReferenceError: item is not defined

Can someone let me know where I am going wrong? Thanks in advance.

Answer 1

I think you're missing 2 things - first of all, your getMappedData method doesn't have a closing curly brace. Secondly, the if condition needs to return a value:

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return item;
        })
      }
      else {
       return "";
      }
}

also, the method call should be this.getMappedData not this.props.getMappedData because the method is defined on the class and NOT coming in from props

the other issue is, you can't just return an array from the getMappedData method, you need to return jsx, so it should probably be something like:

getMappedData = (dataProp) =>{
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

assuming the item is a string or number. If it's an object or array it will not work.

also your render method can just use {this.getMappedData()} no need for the prop in there, your getMappedData method can use the prop:

getMappedData() {
      const { dataProp } = this.props;
      if (dataProp) { 
        return dataProp.map(item =>{
            return <div>{item}</div>;
        })
      }
      else {
       return "";
      }
}

Answer 2

To answer your initial question: The dataProp array can simply be rendered in the following manner:

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

      return <Accordion>
            {
              dataProp && dataProp.map(item =>
              <AccordionItem>
                <AccordionItemTitle>
                  <h3>
                    Details: {item.title}
                  </h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  {item.body}
                </AccordionItemBody>
              </AccordionItem>
            )}
          </Accordion>
        }

Answer 3

Update your call this.props.getMappedData(item[name]) to this.getMappedData(item[name])

The reason it can't find that is props are generally used to pass data from parent to child. This blog post does a great job of explaining it. https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17