reactjs - React accordion with correlating image outside accordion section

Question

I can't find any examples of accordions where the active class is related to an element outside of the accordion. I'm trying to get an image to change on the side of the accordion, where each image is related to a specific object. I managed to get something working using absolute positioning, but I'm looking for a more elegant solution so I can manipulate styling better.

I can get it to work while the image is inside the accordion under the info text, but can't figure out the styling issue. I think I need to do some refactoring or do away with the array mapping to get it to work but I'm not sure.

Here is a codesandbox of more or less what I want to achieve but without the restriction of absolute positioning - https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js

question from:https://stackoverflow.com/questions/66066073/react-accordion-with-correlating-image-outside-accordion-section

Answer 1

You can remove your img tag from your renderedItems and do something like this:

 import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const onTitleClick = (index) => {
    setActiveIndex(index);
  };

  const renderedItems = items.map((item, index) => {
    const active = index === activeIndex ? "active" : "";

    return (
      <div key={item.title}>
        <div className={`title ${active}`} onClick={() => onTitleClick(index)}>
          <i className="dropdown icon"></i>
          {item.title}
        </div>

        <div className={`content ${active}`}>
          <p>{item.content}</p>
        </div>
      </div>
    );
  });

  return (
    <div className="container-gallery">
      <div className="ui styled accordion">{renderedItems}</div>
      <img
        className={`content `}
        src={`${items[activeIndex].image}`}
        style={{
          height: "200px",
          width: "200px"
        }}
        alt="img"
      />
    </div>
  );
};

export default Accordion;

And for the style I don't know what you are using so I made css for the example:

.container-gallery{
  display:flex;
  flex-wrap:no-wrap;
  justify-content: space-between;
}

here a sandBox link