React Button Click Hiding and Showing Components

Question

I have a toggle button that show and hides text. When the button is clicked I want it to hide another component and if clicked again it shows it.

I have created a repl here:

https://repl.it/repls/DapperExtrasmallOpposites

I want to keep the original show / hide text but I also want to hide an additional component when the button is clicked.

How to I pass that state or how do I create an if statement / ternary operator to test if it is in show or hide state.

All makes sense in the repl above!

Does this answer your question? [Show/Hide components in ReactJS](https://stackoverflow.com/questions/29913387/show-hide-components-in-reactjs) — SuleymanSah, Jan 07 '20 at 08:38
you need to pull the state upwards the tree see this https://repl.it/repls/NanoNativeSigns — 3960278, Jan 07 '20 at 09:04

Jap Mul · Accepted Answer · 2020-01-07T08:42:13.930

To accomplish this you should take the state a bit higher. It would be possible to propagate the state changes from the toggle component to the parent and then use it in any way, but this would not be the preferred way to go.

If you put the state in the parent component you can use pass it via props to the needed components.

import React from "react";

export default function App() {
  // Keep the state at this level and pass it down as needed.
  const [isVisible, setIsVisible] = React.useState(false);
  const toggleVisibility = () => setIsVisible(!isVisible);

  return (
    <div className="App">
      <Toggle isVisible={isVisible} toggleVisibility={toggleVisibility} />
      {isVisible && <NewComponent />}
    </div>
  );
}

class Toggle extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.toggleVisibility}>
          {this.props.isVisible ? "Hide details" : "Show details"}
        </button>
        {this.props.isVisible && (
          <div>
            <p>
              When the button is click I do want this component or text to be
              shown - so my question is how do I hide the component
            </p>
          </div>
        )}
      </div>
    );
  }
}

class NewComponent extends React.Component {
  render() {
      return (
          <div>
              <p>When the button below (which is in another component) is clicked, I want this component to be hidden - but how do I pass the state to say - this is clicked so hide</p>
          </div>
      )
  }
}

score 0 · Answer 2 · answered Jan 07 '20 at 08:25

I just looked at your REPL.

You need to have the visibility state in your App component, and then pass down a function to update it to the Toggle component.

Then it would be easy to conditionally render the NewComponent component, like this:

render() {
  return (
    <div className="App">
    {this.state.visibility && <NewComponent />}
    <Toggle setVisibility={this.setVisibility.bind(this)} />
    </div>
  );
}

where the setVisibility function is a function that updates the visibility state.

score 0 · Answer 3 · answered Aug 01 '23 at 03:27

import React, { useState } from "react";

export default function VisibilityToggle() {
  const [visibility, setVisibility] = useState(true);

  return (
    <div className="App">
      {visibility && <h1>Hi Toggle me Please</h1>}
      <input
        type="submit"
        onClick={() => {
          if (visibility) {
            setVisibility(false);
          }
          if (!visibility) {
            setVisibility(true);
          }
        }}
      />
    </div>
  );
}

React Button Click Hiding and Showing Components

3 Answers3

Linked