How to use map/for-each for an object in react?

Question

I'm using for-each function inside my drop-down component. dropDwonItemArray comes as an object with key and value.When I logs it is like below

What I nedd to do inside the drop-down is iterate through this object and pass the values as DropDownItems.I used for -each.Though it console.logs the value, the value doesn't passes to DropDownItem. Can you explain what is the reason here?

DropDown.js

import React from 'react';
import { PropTypes } from 'prop-types';
import {
  DropdownToggle,
  DropdownMenu,
  UncontrolledDropdown,
  DropdownItem
} from 'reactstrap';

import * as Icon from 'react-bootstrap-icons';

import './DropDown.scss';

/**
 * This is a reusable dropdown
 * onClick function and dropdown items come as props
 */
class DropDown extends React.Component {
  render() {
    const { dropDwonItemArray, text, onClick } = this.props;

 
    const dropdownItems = Object.entries(dropDwonItemArray).forEach(
      ([key, value]) => {
        return (
          <DropdownItem>
            <div className="dropdown-items" onClick={onClick}>
              {value}
              {console.log('Test', value)}
            </div>
          </DropdownItem>
        );
      }
    );

    return (
      <div>
        <UncontrolledDropdown className="dropdown-wrapper text p4">
          <DropdownToggle className="select-dropdown">
            <div className="select-text text p4">{text}</div>
            <Icon.CaretDownFill />
          </DropdownToggle>
          <DropdownMenu name="test">{dropdownItems}</DropdownMenu>
        </UncontrolledDropdown>
      </div>
    );
  }
}

DropDown.propTypes = {
  text: PropTypes.string,
  onClick: PropTypes.func,
  menuItemArray: PropTypes.array
};

export default DropDown;

try to use map function instead of forEach, generally we used forEach for iteration not for mapping the data. so when you replace forEach with map it will work as expected. — Sunny Goel, Feb 26 '21 at 19:26

score 2 · Answer 1 · answered Feb 26 '21 at 19:35

Use map instead of forEach, generally we used forEach for iteration not for mapping. follow the below snippet.

import React from 'react';
import { PropTypes } from 'prop-types';
import { DropdownToggle, DropdownMenu,UncontrolledDropdown,DropdownItem} from 'reactstrap';
import * as Icon from 'react-bootstrap-icons';

import './DropDown.scss';

/**
 * This is a reusable dropdown
 * onClick function and dropdown items come as props
 */
class DropDown extends React.Component {
  render() {
   const { dropDwonItemArray, text, onClick } = this.props;
 
   const dropdownItems = Object.entries(dropDwonItemArray).map( // here use 
                                                                //map instead of forEach 
     ([key, value]) => {
    return (
      <DropdownItem>
        <div className="dropdown-items" onClick={onClick}>
          {value}
          {console.log('Test', value)}
        </div>
      </DropdownItem>
    );
  }
);

return (
  <div>
    <UncontrolledDropdown className="dropdown-wrapper text p4">
      <DropdownToggle className="select-dropdown">
        <div className="select-text text p4">{text}</div>
        <Icon.CaretDownFill />
      </DropdownToggle>
      <DropdownMenu name="test">{dropdownItems}</DropdownMenu>
    </UncontrolledDropdown>
  </div>
);
}}
DropDown.propTypes = {
  text: PropTypes.string,
  onClick: PropTypes.func,
  menuItemArray: PropTypes.array
};

export default DropDown;

follow this link to getting more understanding about map and forEach.

Hope it will solve your problem

score 1 · Answer 2 · answered Feb 26 '21 at 19:28

You need to use map instead of forEach.

The forEach method on an array performs an action on each array element but doesn't return a value.

The map method, on the other hand, maps each element in an array to another value.

This is what you want to use in order to map object values into an array of components.

score 1 · Accepted Answer · edited Feb 26 '21 at 22:03

1

Array.prototype.forEach does not return value. You should use Array.prototype.map((value) => {}).

const dropdownItems = Object.entries(dropDwonItemArray).map(
  ([key,value]) => {
    return (
      <DropdownItem key={key}>
        <div className="dropdown-items" onClick={onClick}>
          {value}
          {console.log('Test', value)}
        </div>
      </DropdownItem>
    );
  }
);

edited Feb 26 '21 at 22:03

Dancrumb

26,597
10
74
130

answered Feb 26 '21 at 19:29

Arsen Ghazaryan

910
1
6
5

How to use map/for-each for an object in react?

3 Answers3