Тернарный оператор обычно используется в функциональных компонентах React для условного рендеринга. Это позволяет вам отображать различный контент в зависимости от условия. Вот несколько способов использования тернарного оператора в функциональных компонентах React:

1. Основной тернарный оператор:

   const MyComponent = ({ isLoggedIn }) => {
    return (
      <div>
        {isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>}
      </div>
    );
   };

2. Тернарный оператор с несколькими компонентами:

   const MyComponent = ({ isLoggedIn }) => {
    return (
      <div>
        {isLoggedIn ? (
          <p>Welcome, user!</p>
        ) : (
          <div>
            <p>Please log in.</p>
            <button>Login</button>
          </div>
        )}
      </div>
    );
   };

3. Трнарный оператор со встроенным стилем:

   const MyComponent = ({ isLoggedIn }) => {
    return (
      <div>
        <p style={{ color: isLoggedIn ? 'green' : 'red' }}>
          {isLoggedIn ? 'Logged in' : 'Not logged in'}
        </p>
      </div>
    );
   };

4. Трнарный оператор со сложными условиями:

   const MyComponent = ({ user }) => {
    return (
      <div>
        {user && user.isLoggedIn ? (
          <p>Welcome, {user.name}!</p>
        ) : (
          <p>Please log in.</p>
        )}
      </div>
    );
   };

5. Тернарный оператор с фрагментами JSX:

   const MyComponent = ({ isLoggedIn }) => {
    return (
      <>
        {isLoggedIn ? (
          <>
            <p>Welcome, user!</p>
            <button>Logout</button>
          </>
        ) : (
          <>
            <p>Please log in.</p>
            <button>Login</button>
          </>
        )}
      </>
    );
   };