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.

Red Baron · Accepted Answer · 2020-06-17 04:56:59Z

4

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

answered Jun 17, 2020 at 4:56

Red Baron

7,75312 gold badges48 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

new_reactjs Over a year ago

Hi, thank you for your advice, in your solution text1 also is displayed onLoad, I wanted to display only titles and img1. But you gave me an idea of how to achieve it.

Red Baron Over a year ago

@Lema good to see you found a solution. can you upvote the answer if you found it helpful! I can upvote your question :)

new_reactjs · Accepted Answer · 2020-06-18 02:53:26Z

0

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.

answered Jun 18, 2020 at 2:53

new_reactjs

2264 gold badges16 silver badges22 bronze badges

Comments

DaveL17 · Accepted Answer · 2023-07-20 15:40:35Z

0

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

edited Jul 20, 2023 at 15:40

DaveL17

2,06110 gold badges30 silver badges48 bronze badges

answered Jul 19, 2023 at 4:35

Darshit Akbari

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Change image onClick in React Js

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related