#TIL: React's JSX Default Value

Today I learned about React JSX's default value.

Consider the Button component below:

import React from 'react';
import Loader from '../Loader';

function Button ({  loading }) {
 return <button>{ loading ? <Loader /> : 'Click me!'}<button/>
}

A huge aha moment moments ago! When you supply props without a value, it will default to true.

So in a nutshell, these two JSX expressions below are equivalent:

<Button loading={true} />

<Button loading />

And so, if you use make use of JavaScript coercion nature. These two JSX expressions are also equivalent.

<Button loading={false}/>

<Button />

Plus tip! If you have type-checking in your React project, this could help.

type TButtonProps = {
  loading?: Boolean
}

// So if you do this the type checking won't complain
<Button />