Toggle component in react on button click

Question

I have 4 components. I only want to render one at a time. I have buttons in my nav, when i click one it should render that component and then hide the other 3 (i.e. set them to null)

This is easy with 2 components. I just have a toggle function like so:

toggle() {
  this.setState(prevState => ({
    showTable: !prevState.showTable
  }));
}

I have tried to adapt this for now where I have this:

showComponent(component) {
  this.setState(prevState => ({
    [component]: !prevState.component
  }));
}

This currently shows the component when i click the corresponding button. However, it wont hide the component once the same button is clicked again.

I have all my buttons calling this method like so:

<button onClick={() => this.showComponent('AddPlayer')}>Add</button>
<button onClick={() => this.showComponent('ShowPlayers')}>Players</button>
<button onClick={() => this.showComponent()}>Table</button>
<button onClick={() => this.showComponent()}>Matches</button>

any ideas?

EDIT:

{this.state.AddPlayer ?
              <div className="add-container">
                <AddPlayer />
              </div>
              :
              null
            }
            {this.state.ShowPlayers ?
              <div className="players-container">
                <Players />
              </div>
              :
              null
            }

Can you expand the question to show the components being shown/hidden? — Chris
– Chris, Commented Sep 26, 2017 at 11:07
can you post your render method? so that i can answer well @The walrus — Narasimha Reddy - Geeker
– Narasimha Reddy - Geeker, Commented Sep 26, 2017 at 11:10

Narasimha Reddy - Geeker · Accepted Answer · 2017-09-26 11:32:01Z

9

You can do this in multiple ways,

One way is, create a const with all state values and components like

const components = {
    "AddPlayer": <AddPlayer />,
    "ShowPlayers": <Players />,
    "Something1": <Something1 />,
    "Something2": <Something2 />
}

set value to state like

showComponent(componentName) {
  this.setState({displayedTable: componentName});
}

and inside render simply

render(){
    return(
        <div>
            {components[this.state.displayedTable]}
        </div>
    )
}

Using Switch case

renderComponent(){
    switch(this.state.displayedTable) {
    case "AddPlayer":
      return <AddPlayer />
    case "ShowPlayers":
      return <Players />
  }
}

render () {
    return (
        <div>
            { this.renderComponent() }
        </div>
    )
}

edited Sep 26, 2017 at 11:32

answered Sep 26, 2017 at 11:23

Narasimha Reddy - Geeker

3,9302 gold badges22 silver badges24 bronze badges

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

2 Comments

The Walrus Over a year ago

sorry one thing, if im passing stuff into a component like so: <Table players={players} /> how can i fix that? it says players is undefined and that is because players is relying on state (but i have just put all the above inside state?)

The Walrus Over a year ago

dont worry, fixed. moved it out of state

Collectives™ on Stack Overflow

Toggle component in react on button click

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related