Change image onClick in React Js

Question

I'm trying to create a page in my React Js project, with the content on the left side and content's image on the right side. So far, I was able to create a toggle function that changes text and image according to the selected title, so, for example, if a user clicks title 1, text1 & image1 will be displayed, and when the user clicks title2, text2 & image2 will be rendered and etc. The problem is that images don't load until a title was clicked, but I need to display img1 when page loads for the first time(and then img1 should change to img2 or img3, depending on the clicked title).

codesandbox

My code:

import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    id: "1",
    key: "1",
    title: "Title1",
    text: "Text1.",
    img: "1.jpg"
  },
  {
    id: "2",
    key: "2",
    title: "Title2",
    text: "Text2.",
    img: "2.jpg"
  },
  {
    id: "3",
    key: "3",
    title: "Title3",
    text: "Text3.",
    img: "3.jpg"
  },
  {
    id: "4",
    key: "4",
    title: "Title4",
    text: "Text4",
    img: "4.jpg"
  }
];

export default function App() {
  const [toggled, toggle] = useState("");
  return (
    <div className="App">
      {data.map(({ title, text, key, img }) => {
        return (
          <>
            <div className="main">
              <div className="text">
                <h1 onClick={() => toggle(key)}>{title} </h1>
                {toggled === key ? (
                  <>
                    <p>{text}</p>
                  </>
                ) : null}
              </div>

              <div className="img">
                {toggled === key ? (
                  <>
                    <img src={img} key={key} className="photo" />
                  </>
                ) : null}
              </div>
            </div>
          </>
        );
      })}
    </div>
  );
}

This is how the page is displaying on load now

This is how I want the page to be on load(with img1 being displayed)

What I would love to do is when the page is loaded, it should display img1, but when the user clicks title2, img1 should change to img2, any suggestions will be greatly appreciated,

Thank you.

Answer 1

I'm posting my solution here, in case anyone else stumbles upon a similar problem. I added the following lines of code to my project:

***const [visible, setVisible] = useState(true);***

<h1 onClick={() => {
setToggle(key);
***setVisible(false);***
}}>

<div className="img">
***{visible && key === "1" ? (
<img src={img} 
key={key}  
/>) 
: null}***
</div>

codesandbox

In this case, when the page is loaded, it displays img1 and only titles(without their texts), and only when a user clicks any title, a text, and its image is displayed.

Answer 2

I did a bit of refactoring for you, try this: https://codesandbox.io/s/toggle-kc3q2

I set the initial state to be "1" and using toggle and setToggle as the state and state setter