CODEWITHSUNDEEP
javascriptreactjsforeachdropdownkey-value
Malsha Madushani Kalahewaththa
Malsha Madushani Kalahewaththa

Reputation: 196

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

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 enter image description here

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;

Upvotes: 0

Views: 1637

Answers (3)

Arsen Ghazaryan
Arsen Ghazaryan

Reputation: 1050

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

Upvotes: 1

Sunny Goel
Sunny Goel

Reputation: 2142

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

Upvotes: 2

Dancrumb
Dancrumb

Reputation: 27549

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.

Upvotes: 1

Related Questions