JSX if Statement How to write if statement in React.js?

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-write-if-statement-in-react-js

---

Of course, if we think about if statement in Javascript or Typescript logic, it’s the same as in every Javascript or Typescript place.

It’s just if/else like pure javascript, but in this case, we won’t talk about the normal if/else.

In react, we’ll need if statements for the one more thing, it’s the rendering.

It’s named “Conditional rendering”, but to make it simple, let’s stay with “if statement in react”.

There are the two most popular ways to use conditional rendering that we’ll see in the React.js code, and depends on a case, both of them are correct.

The first way that we can use is to define the conditional rendering directly in the components layout.

It’s quick and easy that we’ll use the most, and in some cases, it is the best for performance.

We’ll be using this way in the cases when we have only one condition, more just as “if”, when we would like to render some element when a specified condition is passed.

The second way is the function created to handle specified parts of the layout, and render it conditionally, to do that we can use not only if/else but the switch case as well.

This one way is right to use in cases where we have more conditions, especially the version with switch one.

But it fires the function anyway, so it is no sense to use it when we have one condition.

Let’s take a look at the code examples where I added both ways of doing that:

// The first example with the code inside functional component
function Parent(props) {
  return(
    <>
      {name === "Duomly" && (
        <DuomlyComponent/> 
      )}
    </>
  )
}

// The second example with the additional function
function renderComponent() {
  const name = 'Duomly';
  if (name === 'Duomly') {
    return 'Duomly';
  } else {
    return null;
  }
}

function Parent(props) {
  return renderComponent();
}

Thank you for reading,
Radek from Duomly

Comments

[Simon Dell]

You can have further fun with this.

// When.jsx
export default ({ children, condition }) => {
    const shouldRender = typeof condition === 'function'
        ? condtion()
        : !!condition

    if(!shouldRender) return null

    return children
}

// Consumer.jsx
import When from '../components/When'

export default (props) =>
    <When condition={props.whateverYouLike}>
        <p>Hello, world!</p>
    </When>

Something like this makes for a comfortable reading experience when you have complex conditions, or many children. At first glance, it seems like a JSX syntax of the separate render function approach.

You can also wrap <When> in a higher-order component to do things like conditionally rendering based on something in Redux state. It's pretty common to have multiple parts of a page change in quite different ways if the user is logged in. <When> lets you abstract that behind a really simple interface. It's also fun to read.

If you wanted to go wild, you could make a <Switch> that inspects all the conditions of its <When> children, only rendering one. That's the essence of what React Router does.

[Qais Makani]

There was a recent article published by Kent C. Dodds arguing against the use of && and || for conditional JSX. His arguments are pretty interesting. Here's the link:
kentcdodds.com/blog/use-ternaries-...

[Duomly]

Good point!

Actually I'd do it another way than his ideas, and his conditional rendering can produce a problem, not because conditional rendering, but because of the way how conditional rendering is used there.

I think to render anything shouldn't happen at all if there is no data.
In most cases, he should check if the length is bigger than zero to render even a container, not render even ul element, but show some msg about no items.

I'm a big fan of the ternary operator, but it's a good idea in some cases, definitely shouldn't be used as a fix for every case.