React: Render Certain Element Based On Certain Button Click

Hi I have a react app where I am returning several buttons. What I am trying to do is depending on the button you click another component will show and render in the view. I've loo

Solution 1:

Checkout the code below. I have added another state variable 'view' which gets the name of the view from the button being clicked and in the render checks the state value for which component to render

classFormContainerextendsReact.Component {
    constructor(props) {
        super(props);
        this.state = {
            dropdownVisible: false,
            view : ''
        };
    }

    handleClick = view =>event => {
        if (!this.state.dropdownVisible) {
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
             document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdownVisible: !prevState.dropdownVisible,
            view
        }));
    }

    render() {
        return (
            <formclassName="form-container"><h2>Browse The Database</h2><buttonclassName="btn btn-default"onClick={this.handleClick('view1')}>
                    By Fiscal Year
                </button><buttonclassName="btn btn-default"onClick={this.handleClick('view2')}>
                    By Research Organization
                </button><divclassName="table-container">
                    {this.state.view === 'view1' && <ResearchOrganizationTable />}
                </div></form>
        );
    }
}
exportdefaultFormContainer;

Solution 2:

try a switch statement.

getView(view) {
  switch(view) {
  case: view1
    returnResearchOrganizationTable />

so each button could have an onClick event that passes the view you want to getView.

Solution 3:

What others suggested, is how I have done it before as well, switch statement, setting state based off button ID. Is this what your looking for:

importReact, { Component } from'react'constViewA = () => {
  return( <div>A VIEW</div>)
};
constViewB = () => {
  return( <div>B VIEW</div>)
};
constViewC = () => {
  return( <div>C VIEW</div>)
};
constViewD = () => {
  return( <div>D VIEW</div>)
};


classAppextendsComponent {
      constructor(props) {
        super(props);
        this.state = { 
          view: "A"
        };
     this.changeView=this.changeView.bind(this);   

  }

  changeView(e){
    console.log(e.target.id);
    this.setState({
      view: e.target.id
    })
  }

  renderButtons(){
    return (
      <div><buttonid="A"onClick={this.changeView}>RENDER A</button><buttonid="B"onClick={this.changeView}>RENDER B</button><buttonid="C"onClick={this.changeView}>RENDER C</button><buttonid="D"onClick={this.changeView}>RENDER D</button></div>
    );
  }

  render() {
    const {view} = this.state;
    switch(view) {
      case"A":
      return(
        <div>
          {this.renderButtons()}
          <ViewA/></div>
        )
      case"B":
      return(
        <div>
          {this.renderButtons()}
          <ViewB/></div>
        )
      case"C":
      return(
        <div>
          {this.renderButtons()}
          <ViewC/></div>
        )
      case"D":
      return(
        <div>
          {this.renderButtons()}
          <ViewD/></div>
        )
    }

  }
}

exportdefaultApp;