#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 />