I've created a dropdown component and called them thrice in a component. When I click one, all open

Question

I'm clicking one component for the dropdown but all three of them are opening. I'm new to react so would love if someone could explain this to me!

This is my Navbar component `

const Navbar = () => {
  
  const [selected, setSelected] = useState(false)

  return (
    <div className='flex justify-evenly items-center h-[80px] bg-black'>
      <div className='logo_container'>
            <img src={logo} alt='' />
        </div>
      <div className='flex w-fit gap-2'>
        <Dropdown 
          name={'Jobs'} 
          selected={selected} 
          setSelected={setSelected} 
          options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
        />
        <Dropdown 
          name={'Talent'} 
          selected={selected} 
          setSelected={setSelected} 
          options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
        />
        <Dropdown 
          name={'Reports'} 
          selected={selected} 
          setSelected={setSelected} 
          options={['My Jobs', 'All Job Posts', 'All Contracts', 'Post Job']} 
        />
      </div>
      
    </div>
  )
}

export default Navbar

`

This is my other Dropdown component

const Dropdown = ({name, selected, setSelected, options}) => {

  const [isActive, setIsActive] = useState(false);

  return (
    <div className='bg-white cursor-pointer w-[100px]'>
      <div className='flex justify-between items-center p-2' onClick={((e) => setIsActive(!isActive))}>
        {name}
        <span><AiOutlineArrowDown /></span>
      </div>
      {
        isActive && (
          <div>
            {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
                setIsActive(false)
              }}
            >
              {option}
            </div>))}
          </div>
        )
      }
    </div>
  )
}

export default Dropdown

I was expecting to open only one dropdown when I clicked on it.

score 0 · Answer 1 · answered Nov 14 '22 at 13:49

Set a key when using .map

Map has been known to cause UI issues if there is no key associated or there are duplicate keys. Better to make sure that they are unique.

Try something like this;

        {options.map((option) => (
        <div
          key={`${name}-option`}
          onClick={(e) => {
            setSelected(option);
            setIsActive(false)
          }}
        >
          {option}
        </div>))}

I've created a dropdown component and called them thrice in a component. When I click one, all open

1 Answers1