score:3

Accepted answer

for your issue :

// means if display is active so nothing else it's active, so everything is active
setdisplay(display === "active" ? "" : "active");

the display variable is shared between each accordion bodies... always the same

do you really need an display var ?

import react, { fragment, usestate } from "react";

const accordion = ({ items }) => {
  const [activeindex, setactiveindex] = usestate(null);

  const handlechange = index => {
    setactiveindex(activeindex === index ? null : index);
  };

  const rendereditems = items.map((item, index) => {
    return (
      <fragment key={item.title}>
        <div classname={`${display} title`} onclick={() => handlechange(index)}>
          <i classname="dropdown icon"></i>
          {item.title}
        </div>
        <div classname={`${activeindex === index ? 'active' : ''} content`}>
          <p>{item.content}</p>
        </div>
      </fragment>
    );
  });
  return (
    <div classname="ui styled accordion">
      {rendereditems}
      {activeindex}
    </div>
  );
};

export default accordion;

Related Query

More Query from same tag