CODEWITHSUNDEEP
javascripthtmlreactjs
RA M
RA M

Reputation: 48

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

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 <p></p>, 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 <p></p> 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 <p></p>, in its place.

Upvotes: 0

Views: 26

Answers (1)

Chuck
Chuck

Reputation: 804

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

Upvotes: 1

Related Questions