How to add a state to check the ban?

Question

React

How to add another state that will show if the user is banned or not. Display information about it in some tag?

import React from 'react';

function App() {
    let [user, setUser] = React.useState();

    return <div>
        <span>{user}</span>
        <button onClick={() => setUser('Alekosh')}>btn1</button>
        <button onClick={() => setUser('Ambrose')}>btn2</button>
    </div>
}

export default App;

Answer 1

import React, { useState } from "react";

const App = () => {
  /** Так */
  const [user, setUser] = useState({
    username: "lol",
    isBanned: false,
  });

  /** Или отдельным, так */
   const [user, setUser] = useState({
     username: "lol"
   });
  const [isBanned, setBanned] = useState(false);

  return (
    <>
      {/** В первом случае */}
      <span>{user.isBanned ? "Забанен" : "Бана нет"}</span>
      <button onClick={() => setUser({ username: "Alekosh", isBanned: false })}>
        btn1
      </button>
      <button onClick={() => setUser({ username: "Ambrose", isBanned: true })}>
        btn2
      </button>

      {/** Во втором случае */}
      <span>{isBanned ? "Забанен" : "Бана нет"}</span>
      <button onClick={() => setUser({ username: "Alekosh" })}>
        btn1
      </button>
      <button onClick={() => setUser({ username: "Ambrose" })}>
        btn2
      </button>
    </>
  );
};

export default App;