If Else Statement in ReactJS

by Clue Mediator · December 31, 2019

Today we will show you how to use if else statement in ReactJS. It’s a basic tutorial for react beginners. You can use If-Else statement while you need to render HTML conditionally.

If Else Statement in ReactJS, Conditional Rendering in React JS, How to Write if/else Conditional Statements in JSX, react if statement in map, react if statement in map, react conditional render multiple elements, react: use a ternary expression for conditional rendering, react: render conditionally from props, jsx control statements.

Checkout more articles on ReactJS

Example:

Let’s take an example to understand the if else statement for conditional rendering. We will display the counter on screen and use the edit button to update the counter. Once you click on the edit button then we will change the layout and display the update screen where you can update the counter and save it.

Screen 1:

Display Screen - Clue Mediator — Display Screen – Clue Mediator

The below screen will be displayed when you click on the “Edit” button.

Screen 2:

Edit Screen - Clue Mediator — Edit Screen – Clue Mediator

We will be redirected back to Screen 1 on the click of the “Update” button.

We can split this example in two parts and manage it by if else statement.

Display section
Edit section

1. Display section

In this section, we will display the counter text and handle the edit button.

import React, { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const [editMode, setEditMode] = useState(false);

  const handleEditClick = () => {
    setEditMode(true);
  }

  if (editMode) {
    // Edit section
    return <div>
      <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
      Edit Section
  </div>
  }
  else {
    // Display section
    return (
      <div>
        <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
        <div>Counter: {counter}</div><br />
        <input type="button" value="Edit" onClick={handleEditClick} />
      </div>
    );
  }
}

export default App;

import React, { useState } from 'react';

function App() {

const [counter, setCounter] = useState(0);

const [editMode, setEditMode] = useState(false);

const handleEditClick = () => {

setEditMode(true);

}

if (editMode) {

// Edit section

return <div>

<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

Edit Section

</div>

}

else {

// Display section

return (

<div>

<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

<div>Counter: {counter}</div><br />

</div>

);

}

export default App;

2. Edit section

For this screen, we will have a counter text, input field to update the counter and use button to update the value of counter on click of it.

import React, { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const [editMode, setEditMode] = useState(false);
  const [input, setInput] = useState(counter);

  const handleEditClick = () => {
    setInput(counter);
    setEditMode(true);
  }

  const handleUpdateClick = () => {
    setCounter(input);
    setEditMode(false);
  };

  if (editMode) {
    // Edit section
    return <div>
      <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
      <div>Counter: {counter}</div><br />
      <input type="number" value={input} onChange={e => setInput(e.target.value)} />
      <input type="button" value="Update" onClick={handleUpdateClick} />
    </div>
  }
  else {
    // Display section
    return (
      <div>
        <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
        <div>Counter: {counter}</div><br />
        <input type="button" value="Edit" onClick={handleEditClick} />
      </div>
    );
  }
}

export default App;

import React, { useState } from 'react';

function App() {

const [counter, setCounter] = useState(0);

const [editMode, setEditMode] = useState(false);

const [input, setInput] = useState(counter);

const handleEditClick = () => {

setInput(counter);

setEditMode(true);

}

const handleUpdateClick = () => {

setCounter(input);

setEditMode(false);

};

if (editMode) {

// Edit section

return <div>

<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

<div>Counter: {counter}</div><br />

<input type="number" value={input} onChange={e => setInput(e.target.value)} />

</div>

}

else {

// Display section

return (

<div>

<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

<div>Counter: {counter}</div><br />

</div>

);

}

export default App;

Output

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

If Else Statement in ReactJS