I wouldlike to change my view when I click on one Button :
JavaScript
x
13
13
1
render(){
2
return(
3
<div className="button-toolbar">
4
<button className="button">Button 1</button>
5
<button className="button">Button 2</button>
6
<button className="button">Button 3</button>
7
8
<View1></View1>
9
<View2></View2>
10
<View3></View3>
11
</div>
12
)
13
For example when I click on the button 1, only View1 is active. If I click on Button 2 ==> View 2 If I click on Button 3 ==> View 3
PS : View1, View2 and View3 are component file (.jsx)
Advertisement
Answer
There are multiple ways to do this. You can set flags around the views. For example
JavaScript
1
13
13
1
render(){
2
return(
3
<div className="button-toolbar">
4
<button className="button" onClick={() => setState({view: 1})}>Button 1</button>
5
<button className="button" onClick={() => setState({view: 2})}>Button 2</button>
6
<button className="button">Button 3</button>
7
8
{this.state.view === 1 ? <View1></View1> : ''}
9
{this.state.view === 2 ? <View2></View2> : ''}
10
<View3></View3>
11
</div>
12
)
13