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

February 6, 2022

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

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

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

When Hide button is clicked, Display text disapper but 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>

>Solution :

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> 
}