How to make 3 buttons show and hide content when click on them?

Question

I am beginner in reactJS, I am trying to make a webapp in which there are 3 buttons , initially the content of first button should be visible then after clicking any other button I want to hide the content of previous and show new content corresponds to the new button pressed.

Like ,say, I have 3 buttons A,B and C on the screen in a row. Having content as "Button A is pressed" , "Button B is pressed" and "Button C is pressed"

Now initially content of A which is "Button A is pressed" should be shown below the buttons.

Now when I press any other button the content of B should be visible which is "Button B is pressed" and A's content should be hidden. Now this happens again and again like, when I press A again then "Button A is pressed" should be visible and content of B should be hidden. Same goes for C.

What I searched and I didn't understood how to apply it as they are just toggling or displaying and not fulfilling what I want to do?

https://reactjs.org/docs/faq-functions.html

Display a component on clicking a button in React

Show or hide element in React

What I have implemented?

var ASearch = React.createClass({
    getInitialState: function() {
        return { showResultsA: true };
    },
    onClick: function() {
        this.setState({ showResultsA: true, showResultsB: false, showResultsC: false  });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button A"  onClick={this.onClick} />
                { this.state.showResultsA ? <AResults /> : null }
            </div>
        );
    }
});
var BSearch = React.createClass({
    getInitialState: function() {
        return { showResultsB: false };
    },
    onClick: function() {
        this.setState({  showResultsA: false, showResultsB: true, showResultsC: false });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button B" onClick={this.onClick} />
                { this.state.showResultsB ? <BResults /> : null }
            </div>
        );
    }
});
var CSearch = React.createClass({
    getInitialState: function() {
        return { showResultsC: false };
    },
    onClick: function() {
        this.setState({  showResultsA: false, showResultsB: false, showResultsC: true });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button C" onClick={this.onClick} />
                { this.state.showResultsC ? <CResults /> : null }
            </div>
        );
    }
});

var AResults = React.createClass({
    render: function() {
        return (
            <div id="Aresults" className="search-results">
               Button A is Pressed
            </div>
        );
    }
});
var BResults = React.createClass({
    render: function() {
        return (
            <div id="Bresults" className="search-results">
              Button B is Pressed
            </div>
        );
    }
});
var CResults = React.createClass({
    render: function() {
        return (
            <div id="Cresults" className="search-results">
               Button C is pressed
            </div>
        );
    }
});

These I have created outside my class importing React.

export default class Program extends React.Component {
render{
return( <ASearch />
        <BSearch />
        <CSearch />);
}

So the buttons will not be dynamic and it will be 3 always right ? — Johnson Samuel, May 26 '18 at 18:13

score 0 · Accepted Answer · edited Jan 19 '20 at 03:33

import React from "react";

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showButton: false,
      showButton: false
    };
  }

  toggle = () => {
    this.setState({ showButton: true, showButton2: false });
  };

  toggle2 = () => {
    this.setState({ showButton: false, showButton2: true });
  };

      hideAll = () => {
    this.setState({ showButton: false, showButton2: false });
  };

  render() {
    return (
      <div>
        <h1 onClick={this.toggle} >Click me</h1>
        <h1 onClick={this.toggle2}>Click me</h1>
        <h1 onClick={this.hideAll}>Hide all</h1>

        {this.state.showButton ? <h1>Show Me</h1> : null}
        {this.state.showButton2 ? <h1>Show Me2</h1> : null}
      </div>
    );
  }
}

export default Button;

You need some kind of HOC (Higher Order Component) component in order to this. I re-edited my first post, i tested this quickly, to make sure it works without any problems.

You simple need to make your states public for some kind of function. You simply can't change the state of another function without using props / non class component.

The example above shows the most elegant way of doing this:

Each state can be manipulated by the clicked function, because the component itself carries these states in this.state.

You could also break this more down, so that each component is a non class constant, where you drop in the values via props. If you simply want to toggle 3 components, i recommend to do it in the way shown above.

Here you can test the code:

Greetings!

On your onSubmit, in first form you are calling `this.handleButton1` and the second `this.showButton2`, can you elaborate? — Anant Sharma, May 26 '18 at 18:30
like you did in toggle functions , I did the same via classes, what's wrong in that? Why it was not working? — Anant Sharma, May 29 '18 at 18:02
I don't think your given example is the same. You simple created functions for each button with a react component. This would be the same as if you would copy my example, but for each button one component. Like i said in the 1 post, you can't change the state of another class, at least not without using props and non function components, which would make this far too complex. As you can see, the example is pretty much clean. One component handles the logic for all buttons. — Prometheus, May 30 '18 at 18:17
Okay so i had to use props for different classes state change, thanks that explains it. Can I have your email ID or whatsapp number, i have just begin learning it and need help(like this 1) and tips for smooth go? — Anant Sharma, May 31 '18 at 18:13

rnmKeshav · Answer 2 · 2018-05-26T19:05:32.463

You don't need to have state in lower level components.

import React from 'react';

const ResultA = (props) => {
  return (
    <div>
      Hi, This is component A
    </div>
  );
};

const ResultB = () => {
  return (
    <div>
      Hi, This is component B
    </div>
  );
}

const ResultC = () => {
  return (
    <div>
      Hi, This is component C
    </div>
  );
}

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      displayedComponent: 'A'
    };
  }

  buttonClickHandler (button) {
    this.setState({
      displayedComponent: button
    });
  }

  getDisplayedComponent () {
    let {displayedComponent} = this.state;

    if (displayedComponent === 'B') {
      return (
        <ResultB />
      );
    }

    if (displayedComponent === 'C') {
      return (
        <ResultC />
      );
    }

    return (<ResultA />);
  }


  render () {
    return (
      <div> 
        <input type="button" value="Button A" onClick={this.buttonClickHandler.bind(this, 'A')} />
        <input type="button" value="Button B" onClick={this.buttonClickHandler.bind(this, 'B')} />
        <input type="button" value="Button C" onClick={this.buttonClickHandler.bind(this, 'C')}/>

        {this.getDisplayedComponent()}
      </div>
    );
  }
}

export default Main;

Can you explain me what are the AComponent , BComponent and CComponent ? And what do you mean by taking onBottonClick function as props in lower component? — Anant Sharma, May 26 '18 at 18:49
This was a good answer, but I already ticked the above one as it worked too. Thanks for helping ! — Anant Sharma, May 29 '18 at 18:01

How to make 3 buttons show and hide content when click on them?

2 Answers2