Reactjs Onclick replace the existing component with another one - example

Question

did any one had this situation where you should replace an existing component with totally a different one - like an accordian.

<ComponentA /> (+ image) - click on this
<ComponentB /> (- image) -

Should I use states here? And Should I be having separate images on each component, but how to deal with positioning the images exactly at same location. Any simple example on how to communicate between such components would be helpful.Thanks.

You can make use of router as well

Shubham Khatri
– Shubham Khatri

2016-11-07 04:13:37 +00:00
Commented Nov 7, 2016 at 4:13 — Shubham Khatri
– Shubham Khatri, Commented Nov 7, 2016 at 4:13

Faysal Ahmed · Accepted Answer · 2016-11-07 03:59:21Z

1

yes you need to use states to manipulate the visibility of components. in your render function you could do something like this

render(){
    return this.state && this.state.showComponent1 ? <ComponentA /> :<ComponentB />
}

and in your button onClick event you could set it up like this

onClick = () => this.setState({showComponent1: !this.state.showComponent1})

answered Nov 7, 2016 at 3:59

Faysal Ahmed

1,55213 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Reactjs Onclick replace the existing component with another one - example

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