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.

Abdul Ahmad · Accepted Answer · 2018-10-10T17:38:06.617

4

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 "";
      }
}

edited Oct 10 '18 at 17:38

answered Oct 10 '18 at 17:20

Abdul Ahmad

9,673
16
64
127

I have added the changes but while calling the method I get error - Uncaught ReferenceError: item is not defined – techie_questie Oct 10 '18 at 17:26
can you copy the new code and paste it below your original question - maybe title it 'edit' or something – Abdul Ahmad Oct 10 '18 at 17:28
your return looks wrong - it shouldn't be `return
dataProp[item]
` see my code - it should be `
{item}
` assuming item is not an object – Abdul Ahmad Oct 10 '18 at 17:31
correct, I modified and added curly braces around, still the same issue :( – techie_questie Oct 10 '18 at 17:33
you need to remove the word `dataProp` it's just `
{item}
` but that may not work if the `item` is an object or array - it needs to be a string or integer – Abdul Ahmad Oct 10 '18 at 17:34
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181630/discussion-between-duxfox-and-techie-questie). – Abdul Ahmad Oct 10 '18 at 17:35

Pranita · Answer 2 · 2018-10-10T17:57:09.247

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>
        }

score 0 · Answer 3 · answered Oct 10 '18 at 17:20

0

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

answered Oct 10 '18 at 17:20

JakeWilson801

1,036
7
20

1

My bad, it was a typo. I am using this.getMappedData(item[name]) only. Edited the post.Thanks for pointing out. – techie_questie Oct 10 '18 at 17:22

How to use ES6 map function in React stateless component

3 Answers3