CODEWITHSUNDEEP
reactjsdrop-down-menucomponents
Marouen Abdi
Marouen Abdi

Reputation: 53

Building Dropdown component

I'm having a problem building a dropdown component. In the function to get the selected item I'm having this error :

Too many re-renders. React limits the number of renders to prevent an infinite loop.

The code for the component : 

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import '../../../App.css'

function Dropdown({ items }) {

    //const [list, setList] = useState(items);

    const [selectedItem, setSelectedItem] = useState(items[0]);
    const [showItems, setShowItem] = useState(false);
    const [setExpand, setExpandState] = useState("");


    function toggleDropdown() {
        setExpandState(setExpand === "" ? "dropdown-expanded dropdown-expanded-down" : "");
        setShowItem(showItems === false ? true : false);
    };

    const Changed = (item) => {

        setShowItem(false);
        setSelectedItem(item);

    }


    return (

        <div data-dropdown="" className={`dropdown-container dropdown ${setExpand}`} onClick={toggleDropdown} >
            <div className="dropdown-display">
                <div className="dropdown-display-content" >
                    <span data-expression="" class="OSFillParent"> {selectedItem.value}  </span>
                </div>
            </div>
            <div className="dropdown-list" style={{ display: showItems ? 'block' : 'none' }}  >
                <div className="scrollable-list scrollable-list-with-scroll">
                    {items.map(item =>
                        <div className="dropdown-popup-row" key={item.id} onClick={Changed(item)} > {item.value} </div>
                    )}
                </div>
            </div>

        </div>

    );


}

Dropdown.propTypes = {
    items: PropTypes.array,

}

export default Dropdown;

Upvotes: 2

Views: 94

Answers (1)

yuri
yuri

Reputation: 3400

The problem is on here onClick={Changed(item)}

You are calling this on each render, and it's modifying the state every render, so it gets called again recursively.

You can solve it by doing:

<div className="dropdown-popup-row" 
  key={item.id} 
  onClick={() => Changed(item)}> 
  {item.value} 
</div>

Upvotes: 5

Related Questions