If Else Statement in ReactJS

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.

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.

  1. Display section
  2. Edit section

1. Display section

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

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.

Output

Output - If Else Statement in ReactJS - Clue Mediator
Output – If Else Statement in ReactJS – Clue Mediator

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! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *