在 React 中，如果 state 是一个空数组，那么如何有条件地呈现文本？

Question

I want to render 'menu is empty'. Otherwise I am able to map through and render the json data from the api correctly.

const Navbar = () => {
    const [menu, setMenu] = useState([]);

    if (menu === []) {
        setMenu(["menu is empty"])
    }

    return (
        <div className='nav-area'>
        <Link to='/' className='logo'>LOGO</Link>
            <ul className='menus'>
            {menu.map((main) => (
            <MenuItems items={main} key={main.type}/>
            ))}
            </ul>
        </div>
    );
};

export default Navbar;

Answer 1

you can simply check your array length and base on that render text or ul with items

sth like this:

const Navbar = () => {
    const [menu, setMenu] = useState([]);


    return (
        <div className='nav-area'>
        <Link to='/' className='logo'>LOGO</Link>
        {
              menu.length > 0 ? (
                <ul className='menus'>
  
           {
              menu.map((main) => (
                <MenuItems items={main} key={main.type}/>
                )) 
            }
           
            </ul>
              )  : <>menu is empty</>
          }
           
        </div>
    );
};

export default Navbar;

Answer 2

You can use inline If-Else to render conditionally.

Inline If-Else with Conditional Operator

Example:

const Navbar = () => {
    const [menu, setMenu] = useState([]);

    if (menu === []) {
        setMenu(["menu is empty"])
    }

    return (
        <div className='nav-area'>
        <Link to='/' className='logo'>LOGO</Link>
            <ul className='menus'>
            { menu.lenght < 1
                  ? menu.map((main) => (
                        <MenuItems items={main} key={main.type}/>
                    ))
                  : 'menu is empty'
             }
            </ul>
        </div>
    );
};

export default Navbar;

Answer 3

In this scenario there is two possibilities either menu is empty or have some data.

What i do in this situation is check for condition whether array is empty by .length property and also check for if not empty then is it an array or not by Array.isArray method.

If both condition satisfy then render the content otherwise render the "Menu is empty". Something like this

const Navbar = () => {
  const [menu, setMenu] = useState([]);

  return (
    <div className="nav-area">
      <Link to="/" className="logo">
        LOGO
      </Link>

      {Array.isArray(menu) && menu.length ? (
        <ul className="menus">
          {menu.map((main) => (
            <MenuItem items={main} key={main.type} />
          ))}
        </ul>
      ) : (
       // or you may have a component for this 
        <h3>Menu is Empty</h3>
      )}
    </div>
  );
};

export default Navbar;

Answer 4

right way using react

import { useMemo } from "react";

const Navbar = () => {
    const [menu, setMenu] = useState([]);

    const displayMenus = useMemo(
        () =>
        {
            if(menu.length === 0) return <div>EMPTY</div>
            return menu.map(
                (main) =>
                {
                    return <MenuItems items={main} key={main.type}/>
                }
            )
        },
        [menu]
    )

    return (
        <div className='nav-area'>
            <Link to='/' className='logo'>LOGO</Link>
            <ul className='menus'>
                {displayMenus}
            </ul>
        </div>
    );
};

export default Navbar;