Сменить изображение onClick в React Js

Question

Я пытаюсь создать страницу в моем проекте React Js с содержимым слева и изображением содержимого справа. До сих пор мне удалось создать функцию переключения, которая изменяет текст и изображение в соответствии с выбранным заголовком, поэтому, например, если пользователь щелкает заголовок 1, будут отображаться текст1 и изображение1, а когда пользователь щелкает заголовок2, текст2 и image2 будет визуализирован и et c. Проблема в том, что изображения не загружаются, пока не был выбран заголовок, но мне нужно отображать img1 при загрузке страницы в первый раз (а затем img1 должен измениться на img2 или img3, в зависимости от заголовка, по которому щелкнули мышью).

коды и ящик

Мой код:

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>
  );
}

Вот так страница теперь отображается при загрузке

Вот как я хочу, чтобы страница была загружена (с отображением img1)

То, что я хотел бы сделать, это когда страница загружена, она должна отображать img1, но когда пользователь нажимает title2, img1 должен измениться на img2, любые предложения будут приняты с благодарностью,

Спасибо.

Answer 1

Я сделал для вас небольшой рефакторинг, попробуйте следующее: https://codesandbox.io/s/toggle-kc3q2

Я установил начальное состояние на «1» и использовал toggle и setToggle как средство установки состояния и состояния

Answer 2

Я публикую здесь свое решение на случай, если кто-то еще наткнется на аналогичную проблему. Я добавил в свой проект следующие строки кода:

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

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

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

codeandbox

В этом случае, когда страница загружена, отображается img1 и только заголовки ( без их текстов), и только когда пользователь щелкает любой заголовок, отображается текст и его изображение.