How to remove a component in React.js.

Toggling the display state of a component is one of the defining purposes of modern frontend frameworks. UI elements are added and removed consistently throughout most workflows. With each UI segment representing a component, it makes sense to be able to remove it with ease.

So, how do you remove a component in React.js? The best way to remove a component in React.js is to render it conditionally using ternary operators and state.

Let’s say we have a functional component called HeaderText:

function HeaderText (props) {
  return <h1>{props.title}</h1>;
}
  • We want to toggle this text component to display based on a button click.
  • Let’s create an App component that uses showButton state to toggle the display of HeaderText
// import header component here
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showButton: false,
    };
  }

 toggleButton = () => {
    this.setState({ showButton: !this.state.showButton });
  };

  render() {
    const { showButton } = this.state;
    return (
      <div>
        <button onClick={() => this.toggleButton()}>Click me</button>
        {showButton ? <HeaderText title="Hello React"/> : null}
      </div>
    );
  }
}

Let go over what’s happening here:

  • When clicked, our showButton state will change
    • If already false –> true, if already true –> false
  • When it’s false, our ternary operator (?) will not render <HeaderText /> and will instead render null.
    • This is essentially how you removed a component in React.js

And there you have it. Remember, you can always add or remove any component in React.js using state and conditional rendering.

Gareth Dunne

Senior JavaScript Engineer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.