React Styled Components - How to change color of clicked element in map function?

Question

I am generating buttons from a data.js file using the map() function, which then change the content of the page depending on the ID they correspond to. How can I use styled-components to change the background color of the that is currently selected? I want the whole thing to still be based on the map() function

Data.js

technology: [
    {
      id: 1,
      name: "Launch vehicle",
      images: {
        portrait: "../assets/technology/image-launch-vehicle-portrait.jpg",
        landscape: require("../assets/technology/image-launch-vehicle-landscape.jpg"),
      },
      description:
        "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!",
    },
    {
      id: 2,
      name: "Spaceport",
      images: {
        portrait: "../assets/technology/image-spaceport-portrait.jpg",
        landscape: require("../assets/technology/image-spaceport-landscape.jpg"),
      },
      description:
        "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch.",
    },
    {
      id: 3,
      name: "Space capsule",
      images: {
        portrait: "../assets/technology/image-space-capsule-portrait.jpg",
        landscape: require("../assets/technology/image-space-capsule-landscape.jpg"),
      },
      description:
        "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained.",
    },
  ],

Technology.js

export const NumberCircle = styled.div`
  height: 50px;
  width: 50px;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
`;


function Technology() {
  const [toggle, setToggle] = useState({
    id: 1,
    name: "",
    images: {
      landscape: "",
    },
    description: "",
  });

  return (
    <>
      <Wrapper>
        <Title>
          <p style={{ marginRight: "10px", color: "grey", fontWeight: "bold" }}>
            03
          </p>
          <p>SPACE LAUNCH 101</p>
        </Title>

        <ImageContainer>
          <img src={toggle.images.landscape} alt="tech"></img>
        </ImageContainer>

        <CircleWrap>
          {data.technology.map((tech) => (
            <NumberCircle key={tech.id} onClick={() => setToggle(tech)}>
              {tech.id}
            </NumberCircle>
          ))}
        </CircleWrap>
      </Wrapper>
    </>
  );
}

Answer 1

You can compare the id and change the className or the style of your component

With a className, it coud be something like this,

//className props of NumberCircle component

className={toggle.id===tech.id?'selected':''} 

you can after use css to change the display

With inline style, just add a style prop to your component:

style={toggle.id===tech.id?{ backgroundColor: 'blue'}:{}}