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

    More articles

    Here's How To Hide Admin Panel Menus In Strapi

    How to hide admin panel menus in Strapi. This is a quick guide to help you hide the admin panel menus in Strapi.

    Read more

    End-to-End Testing with Sanity Studio & Playwright

    Learn how to do end-to-end test Sanity Studio with Playwright

    Read more

    Let's talk about your project