I'm having issues with finding a solution or correct direction for my problem. At the moment once you click on -> className="List-section", it will show the information in -> className="Paragraph-container", but there are 4 sections of it and I want to make that if one is open, another closes. Because now I can open all off then, but it has to be opened one at a time only. If it helps, here's the link to the prototype: https://www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5:711&scaling=min-zoom&page-id=0:1&starting-point-node-id=5:509

Thanks for all the help in advance!

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

CodePudding user response：

I think that the structure that you have here is not optimal for this behavior that you're looking for.

I would suggest doing something like:

function ListItem({ listNumber, listData }) {
  const [currentSection, setCurrentSection] = useState(0);
  
  const totalSections = listData.items.length;
  
  const handleOpenSection = () => {
     const nextSection = currentSection === totalSections ? 0 : currentSection   1;
     setCurrentSection(nextSection);
  }

  return (
    <div className="List">
      <div className="List-section" onClick={handleOpenSection}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            {currentSection === index && <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
            }
          ))}
        </div>
    </div>
  );
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

As you're handling 4 sections, it would be impossible to implement this behavior using a boolean, so this suggestion uses the position of each section in the items array to see which one is open at the time.

The handleOpenSection function is just a suggestion that seemed fit since you wouldn't want to have a currentSection greater than the total sections that you have. Also this code would show the first section in the first render, which is something you might not want to happen!

CodePudding user response：

This is where I'm getting data from and passing logic to the component.

function App() {
  const data = [
    {
      title: "Build test task",
      items: [
        "Create repositor",
        "Implement designs",
        "Implement functionality",
      ],
    },
    {
      title: "Submit your test task",
      items: [
        "Open email client",
        "Sent link information to [email protected]",
      ],
    },
    {
      title: "Participate in tech interview",
      items: ["Talk with HR", "Talk with Tech team"],
    },
    {
      title: "Reciece anster",
      items: ["Receive answers", "Start your IT career"],
    },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>CCT Lab Process</h1>
      </header>
      <div className="App-content">
      {data.map((dataObject, index) => (
        <ListItem key={index} listData={dataObject} listNumber={index   1} />
      ))}
      </div>

    </div>
  );
}

And here's where I suppose to be handling the logic for the sections, that if you open one, the previously opened closes and so on.

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}