CODEWITHSUNDEEP
javascriptreactjs
crashoulol
crashoulol

Reputation: 39

React How to change view after click on button

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)

Upvotes: 1

Views: 7393

Answers (4)

Viresh Mathad
Viresh Mathad

Reputation: 636

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

Upvotes: 0

Jakub Kosior
Jakub Kosior

Reputation: 316

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.

Upvotes: 0

Sakshi
Sakshi

Reputation: 1548

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

Upvotes: 1

KnowYourElements
KnowYourElements

Reputation: 412

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

Upvotes: 3

Related Questions