show and hide react JS

Question

In my react JS Code i have 2 Onclick function

    class Traders extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 10,
          listVisibleList: false,
          gridVisibleList: false,
          listVisibleGrid: false,
          gridVisibleGrid: false

        };
      }

      componentDidMount() {
      }


      onClickListView() {
        this.setState({
          listVisibleList: !this.state.listVisibleList,
          gridVisibleList: !this.state.gridVisibleList
        });
      }

      onClickGridView(){
        this.setState({
          listVisibleGrid: !this.state.listVisibleGrid,
          gridVisibleGrid: !this.state.gridVisibleGrid
        });
      }

      render() {
        const widthRisk = {
          width: '60%'
        };

        return (
          <div id="home">

                      <Col xs={12} sm={12} md={2}>
                        <div className="option-layout">
                          <ul>
                            <li>
                              <a href="#" onClick={() => this.onClickListView()}>
                                <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                              </a>
                            </li>
                            <li>
                              <a href="#" onClick={() => this.onClickGridView()} >
                                <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                              </a>
                            </li>
                          </ul>
                        </div>
                      </Col>

                {
                  this.state.listVisibleList ? <ListTrader /> : <ListTrader />
                }



                {/* <ListTrader /> */}
                {/* <GridTrader /> */}

                </div>
)
}

The problem is how i want to show some specific component.

When i click onClickListView it shows <ListTrader /> Component and <GridTrader /> Component hide

When i click onClickGridView it shows <GridTrader /> Component and <ListTrader /> Component hide

I already tried to do some show and hide referring from this question
Show/Hide components in ReactJS

But the onClick from that question the function showing like toggle function. Any idea how to solve this?

Your help really appreciate. Thanks.

Sorry didn't understand what you want, could you please explain? — AlexanderT, Aug 02 '17 at 11:56
hi @AlexanderTuniev sorry if my grammar hard for u to understand. To summarize it i have 2 onclick function so when i click onClickListView it shows Component and Component hide — Fiido93, Aug 02 '17 at 11:58

score 3 · Accepted Answer · answered Aug 02 '17 at 12:08

This is not working example but hope will give you a direction, (if I correctly understand your issue)You can hold in state string variable and based on value it has display what you want.

class Traders extends Component {
  constructor(props) {
     super(props);
     this.state = {
      ....
      visibleView:'list' //'grid'
     };
  }

  componentDidMount() {}


 onToggleView(view) {
   this.setState({
    visibleView:view
  });
 }

render() {
  const widthRisk = {
    width: '60%'
  };

return (
  <div id="home">
    <div className="app-body" id="view">
      <div className="padding font-responsive">
        <Row>

  ..............
  ...............
              <Col xs={12} sm={12} md={2}>
                <div className="option-layout">
                  <ul>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('list')}>
                        <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                      </a>
                    </li>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('grid')} >
                        <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                      </a>
                    </li>
                  </ul>
                </div>
              </Col>
            </div>
          </Col>

        </Row>

        {
          this.state.visibleView ==='list'? <ListTrader /> : <GridTrader />
        }



        {/* <ListTrader /> */}
        {/* <GridTrader /> */}

        </div>

      </div>
    </div>

show and hide react JS

1 Answers1