How can I create a HTML/JavaScript element that when I click it it shows a different element in React.js?

Question

Basically I have these <img/> elements kind of like a bunch of buttons stacked like a table. In the code, they are created through a loop (.map() in React.js).

I want to know the most practical and semantically-efficient way to implement a way to click a button and have it "turn over" or basically show a new element, say a , in its place.

Should I have the <img /> be wrapped in a or maybe a <div>? Or nothing at all?

I can think of several ways to implement the functionality I described above, such as having the  display 'none' originally, and when clicked display 'initial.' I implemented that in a JavaScript DOM event listener, but I am trying a new approach with React and I believe that my code was very rudimentary and inefficient.

How can I approach this 'click and flip' functionality in React.js? it "turn over" or basically show a new element, say a , in its place.

Chuck · Accepted Answer · 2021-08-11 23:22:44Z

1

You can use state to show image or another content. Change the state when user click the image tag. Display the content depending on the state in the render function.

constructor {
   this.state = {
       mode: 'image'
   }
}


render() {
const {mode} = this.state;
    return (
        <React.Fragment>
        {
            mode === "image" ? <img onClick={()=>{this.setState("div")}}/>:(
                <div>//content here</div>
            )             
        }
        </React.Fragment>
    )
}

answered Aug 11, 2021 at 23:22

Chuck

8147 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How can I create a HTML/JavaScript element that when I click it it shows a different element in React.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related