DEV Community: Nikhil Soni

How to implement conditional rendering in react.

Nikhil Soni — Sat, 12 Feb 2022 11:26:26 +0000

Hello everyone,
In this article, let us understand how to render react elements conditionally.

React allows us to render UI markup based on different conditions. There may be more possible ways to implement conditional rendering in react, but i am going to discuss only a few points that are most commonly used.

To understand conditional rendering clearly we will take a simple example. Suppose we have two buttons in our app Login and Logout.
Our requirement is such like when we are logged in then Logout button should display and when we have logged out then Login button should display.

So how we will solve this problem.

Let's have a look one by one.

By using if else Statement.

While executing if else block, when condition is satisfied then code inside if block will execute otherwise code inside else block will execute.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  const displayButton = () => {
    if (isLoggedin) {
      return <button>Logout</button>;
    } else {
      return <button>Login</button>;
    }
  };
  return (
    <div>
      <h1>Conditional rendering</h1>
      {displayButton()}
    </div>
  );
};

As we know we can write the javascript expression in jsx, so we have written one function which returns button element based on which condition is true and that particular returned element only will render.

By using Element variables.

In this approach instead of using javascript function in jsx expression, we will use jsx element variable. Value of jsx element will be decided based on conditione like same as the previous approach.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  let Button;

  if (isLoggedin) {
    Button = <button>Logout</button>;
  } else {
    Button = <button>Login</button>;
  }

  return (
    <div>
      <h1>Conditional rendering</h1>
      {Button}
    </div>
  );
};

In the above example, we are using Button variable as jsx element and its value is assigned based on isLoggedin state.

By Using Ternary Operators

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin ? <button>Logout</button> : 
      <button>Login</button>}
    </div>
  );
};

In the above example, instead of using conditions in component functions, we are applying conditions in jsx expression itself. For applying conditions we are using the ternary operator, as we know ternary operators use three operands, the first is the condition itself, the second is the result which is returned if the condition is satisfied and the third is returned when the condition is not satisfied.

By Using Logical && operator.

This approach is also a little bit similar to the previous approach but in this approach instead of the ternary operator, we use logical && operator.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin && <button>Logout</button>}
      {!isLoggedin && <button>Login</button>}
    </div>
  );
};

In the above example there are two jsx expressions for rendering button element, based on isLoggedin state suitable jsx expression will be evaluated.

There may be more approaches but above mentioned approaches are commonly used.

I hope this post was useful.

Handling multiple inputs in react.

Nikhil Soni — Fri, 11 Feb 2022 15:22:26 +0000

Hello everyone,
In this article, let us understand how to handle multiple inputs in react.

Recently I was working on one side project where I had multiple input fields.

Let's take the example of the below code.

const Form = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [country, setCountry] = useState('');
  console.log(name, age, country);
  return (
    <form>
      <input
        type='text'
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      <input
        type='text'
        value={age}
        onChange={(e) => {
          setAge(e.target.value);
        }}
      />
      <input
        type='text'
        value={country}
        onChange={(e) => {
          setCountry(e.target.value);
        }}
      />
    </form>
  );
};

In the above example we have 3 different input fields, we may have more than 3 also, and 3 different states and 3 onChange function to update respective states.

We can solve this problem with help of the following approach.

const AnotherForm = () => {
  const [inputValues, setInputValues] = useState({
    name: '',
    age: '',
    country: '',
  });
  const inputChangeHandler = (e) => {
    const { id, value } = e.target;
    setInputValues({ ...inputValues, [id]: value });
  };
  
  return (
    <form>
      <input
        id='name'
        type='text'
        value={inputValues.name}
        onChange={inputChangeHandler}
      />
      <input
        id='age'
        type='text'
        value={inputValues.age}
        onChange={inputChangeHandler}
      />
      <input
        id='country'
        type='text'
        value={inputValues.country}
        onChange={inputChangeHandler}
      />
    </form>
  );
};

In this solution, we have to manage only one state which is having a object, with property of the respective input field, as an initial value. All input fields will have value attribute with their respective value. e.g value={inputValues.name}.
We will define one single handler function inputChangeHandler, which will handle onChange event for every input change.

How does all this work? let us understand step by step.

First we are destructuring e.target object to get id and value attributes from input fields.
Then we are updating inputValues state object with existing values with help of setInputValues and spread operator.
And now we are updating value of the input field that is being triggered with onChange. e.g. - [id] : value, here we are setting dynamic id property key.

Passing data from React Router's Link to another component.

Nikhil Soni — Thu, 10 Feb 2022 16:28:58 +0000

Hey everyone,
In this article, let us understand how to pass data from one route to another route.

Suppose we have a user list on the home page, all users are listed as User components.We need to go to the ViewUser component to see the detail of the user on which we clicked.

How we will implement this ?

There may be different approaches, but I will focus on approach in which data will be passed from one route to another route.
To do this with React Router, we can pass data from one Link to new Route that is being rendered.

Let's take an example to understand this approach more clearly.

const Home = () => {
  const userList = [
    {
      id: 1,
      name: 'ajay',
      age: 25,
      country: 'India',
    },
    {
      id: 2,
      name: 'john',
      age: 35,
      country: 'US',
    },
    {
      id: 3,
      name: 'kamal',
      age: 25,
      country: 'UK',
    },
  ];
  return (
    <div>
      {userList.map((user) => {
        return <User user={user}></User>;
      })}
    </div>
  );
};

const User = (props) => {
  const { name, id } = props.user;
  return (
    <Link to={`/user/${id}`} state={props.user}>
      <div>
        <p>Name: {name}</p>
        <p>User id: {id}</p>
      </div>
    </Link>
  );
};

In the above example, there are two components, in Home components all users are listed and another is the User component which is using Link to go to another route.

When the user clicks on the user component it will navigate to the ViewUser component.

const ViewUser = () => {
  const location = useLocation();
  const user = location.state;
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Country: {user.country}</p>
    </div>
  );
};

As mentioned in the above ViewUser component we need user's other details name, age, country.

So how we will pass this information to ViewUser Component from User Component.

To do this, we have to include a state prop with the data we want to pass along - in our case, it is user data.

<Link to={`/user/${id}`} state={props.user}>
      <div>
        <p>Name: {name}</p>
        <p>User id: {id}</p>
      </div>
    </Link>

So how do we get access to the data on state in ViewUser? When we pass data along via the state property that will be available on the location's state property, which we can get using React Router's custom hook.

const location = useLocation();
const user = location.state;