How to hide button when another button is clicked in React? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to hide button when another button is clicked in React? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have 2 buttons displayed on the page Display and Hide. When the Hide button is clicked I want to hide the Display button.

I am using useState. To some extent, I am able to hide Display more text present on the button, but not the whole button

Initial state- https://ibb.co/jMdH3tq

When the Hide button is clicked, Display text disappear but the button stays- https://ibb.co/Jm5FPNy

const [show, setShow] = useState(false);

const hideButton = () => {
  setShow(true);
};

Hide button code:

<div>
  <button
    style={{ marginLeft: '190px' }}
    className="button button1"
    onClick={() => {
      clearBooks();
      hideButton();
    }}
  >
    Hide
  </button>
</div>;

Show button code:

<button
  className="button button1"
  style={{ marginLeft: '190px', width: '124px', height: '50px' }}
  onClick={fetchBooks}
>
  {!show && 'Display more'}
</button>;

Answer

If you are trying to hide the button do the following: I noticed the show state is set to false initially and you are setting it to true on click. Do you want the opposite, true as initial state hide when selecting the button?

Based on that, adjust show accordingly either show or !show

{show &&
<button
    className="button button1"
    style={{ marginLeft: "190px", width: "124px", height: "50px" }}
    onClick={fetchBooks}
  >
  </button> 
}
We are here to answer your question about How to hide button when another button is clicked in React? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji