Sometimes we are in a situation where we want to render any particular content only and if the condition is not satisfied, we may want to hide the content.

Let us understand this with an example. Suppose we are inside our profile section. We want to see the details from our profile page but we don't want to see the form below that to edit the information at the same time. It'll look a bit annoying.

We want to see the edit form only when we want to edit any information or when we want to add any information.

This can be toggled on a button click. This looks easy right. Yes, but the implementation part is a bit tricky.

We can toggle visibility in two different methods.

1. Using the ternary operator
2. Using the if statement

It's up to you which one you want to use. I prefer the second one. I' tell you why but let me show you both the ways first.

For using any of the methods, we need to add a visibility state that is going to hold the toggle state.

So, let's add a visibility state.

const [visible, setVisible] = useState(() => true);

Note: Here I'll be using React Hooks for implementing state but this can be done on both class as well as in functional component.

Here I've kept the state visible at the initial stage. We will change the state when we will try to toggle the visibility.

Using the Ternary Operator

Next inside the return statement, we are going to use the ternary operator of javascript.

condition ? statement1 : statement2;

I hope all of you are aware of this ternary operator. If not, it's fine. You can learn it here. We are using ternary operator because we can't use if block here.

Now in place of condition, we will put the current toggle state and in place of statement1, we will keep the JSX content which we want to show.

In place of statement2, we will keep null. Null will hide the content from there.

We also require a button to toggle the state and we have to handle onClick of the button for the visibility.

Here is the code for the same.

import React, { useState } from "react";

const HooksEx = () => {
  const [visible, setvisible] = useState(() => true);

  return (
    <div>
      <button
        onClick={() => {
          // here I am toggling the visibility using ! operator
          setvisible((visible) => !visible);
        }}
      >
        Toggle Visibility
      </button>
      {visible ? <p>Pratik</p> : null}
    </div>
  );
};

export default HooksEx;

Next, we are going to use the if statement to hide the content and this method is more cleaner way of doing the same.

Using the if statement

When we are using this method, we have to create a new variable and we have to assign null in that variable.

let inputValue = null;

Now inside if condition, we will put the current toggle state and in place of statement body, we will keep the JSX content which we want to show.

Similarly, we will use a button to toggle the state and we have to handle onClick of the button for the visibility.

Here is the code for the same.

import React, { useState } from "react";

const HooksEx = () => {
  const [visible, setvisible] = useState(() => true);

  let input = null;

  if (visible) {
    input = (
      <div>
        <p>Pratik</p>
      </div>
    );
  }

  return (
    <>
      <button
        onClick={() => {
          setvisible((visible) => !visible);
        }}
      >
        Toggle Visibility
      </button>
      {input}
    </>
  );
};

export default HooksEx;

This is going to toggle our content whatever we have kept inside the statement of the conditionals.

Well, this was all for today. Thanks for your time. If you found this post helpful😊, please share this with your friends.

If you stuck into some kind of problem, feel free to comment below. I'll be happy to help you🙂.

This is Pratik and I'll meet you in my other post✌️.