React How to change view after click on button

Question

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

KnowYourElements · Accepted Answer · 2020-12-20 17:10:08Z

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

answered Dec 20, 2020 at 17:10

KnowYourElements

4122 silver badges13 bronze badges

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

2 Comments

Sakshi Over a year ago

Here you havent put any condition for View3 ,which i think will always render View3

Sakshi Over a year ago

For the first time it will render View3 .And even if the user clicks on 2nd button along with view2,view3 will be there.

Sakshi · Accepted Answer · 2020-12-20 17:18:10Z

1

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

edited Dec 20, 2020 at 17:18

answered Dec 20, 2020 at 17:12

Sakshi

1,5563 gold badges11 silver badges17 bronze badges

Comments

Jakub Kosior · Accepted Answer · 2020-12-20 17:20:03Z

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.

Viresh Mathad · Accepted Answer · 2020-12-20 17:32:41Z

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.org/docs/hooks-intro.html

Collectives™ on Stack Overflow

React How to change view after click on button

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related