I wouldlike to change my view when I click on one Button :

render(){
        return(
          <div className="button-toolbar">
            <button className="button">Button 1</button>
            <button className="button">Button 2</button>
            <button className="button">Button 3</button>
            
            <View1></View1> 
            <View2></View2> 
            <View3></View3> 
          </div>
        )

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 ponent file (.jsx)

I wouldlike to change my view when I click on one Button :

render(){
        return(
          <div className="button-toolbar">
            <button className="button">Button 1</button>
            <button className="button">Button 2</button>
            <button className="button">Button 3</button>
            
            <View1></View1> 
            <View2></View2> 
            <View3></View3> 
          </div>
        )

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 ponent file (.jsx)

• javascript
• reactjs

Share Improve this question Follow edited Dec 20, 2020 at 17:10 crashoulol asked Dec 20, 2020 at 17:06 crashoulolcrashoulol 3911 silver badge77 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

There are multiple ways to do this. You can set flags around the views. For example

render(){
        return(
          <div className="button-toolbar">
            <button className="button" onClick={() => setState({view: 1})}>Button 1</button>
            <button className="button" onClick={() => setState({view: 2})}>Button 2</button>
            <button className="button">Button 3</button>
            
            {this.state.view === 1 ? <View1></View1> : ''}
            {this.state.view === 2 ? <View2></View2> : ''}
            <View3></View3> 
          </div>
        )

Do it like this:

render(){
        return(
          <div className="button-toolbar">
            <button className="button" onClick={() => setState({view: 1})}>Button 1</button>
            <button className="button" onClick={() => setState({view: 2})}>Button 2</button>
            <button className="button" onClick={() => setState({view: 3})}>Button 3</button>
            
            {this.state.view === 1 ? <View1/> :this.state.view === 2? <View2/>:this.state.view === 3?<View3/>:''}

            
          </div>
        )
    

If you're using class approach you could do something like this

class Test extends React.Component {

    state = {
       currentView: 1
    }

    setCurrentView(viewNumber) {
        this.setState({ currentView: viewNumber });
    }

    render(){
        return(
          <div className="button-toolbar">
            <button 
                className="button" 
                onClick={() => this.setCurrentView(1)}
            >Button 1</button>
            // in the rest just change the number
          
            {
               this.state.currentView === 1 
                   ? <View1/>
                   : // (and so on)
            }
          </div>
        )

You can create a simple array to generate buttons and add method to class to remove this part

{
   this.state.currentView ...
}

from jsx.

Before next questions like this, please visit official React docs.

This can be achieved in multiple ways.

Achieving it using hooks approach (using state)

• Use the react's useState - active .
• Active View will be decided based upon the value of active value. Thus creating the reactivity b/w active and the view to be rendered.

I have created a sample code in codesandbox . You can refer - Link

const [active, setActive] = React.useState(1);
  const SetView = (active) => {
    setActive(active);
  };

  const ActiveView = () => {
    switch (active) {
      case 1:
        return <View1 />;
      case 2:
        return <View2 />;
      default:
        return <View3 />;
    }
  };

  return (
    <div className="button-toolbar">
      <button className="button" onClick={() => SetView(1)}>
        Button 1
      </button>
      <button className="button" onClick={() => SetView(2)}>
        Button 2
      </button>
      <button className="button" onClick={() => SetView(3)}>
        Button 3
      </button>

      {ActiveView()}
    </div>
  );

You can learn more about the React Hooks in the article - https://reactjs/docs/hooks-intro.html