react中的大于conditional不起作用

{isLoggedIn ? <UserProfile /> : <LoginPrompt />}

class App extends React.Component {
  state = {
    isLoggedIn: false
  };

  handleLogin = () => {
    this.setState({ isLoggedIn: true });
  };

  render() {
    return (
      <div>
        {this.state.isLoggedIn ? <UserProfile /> : <LoginPrompt />}
        <button onClick={this.handleLogin}>Login</button>
      </div>
    );
  }
}

import UserProfile from './UserProfile';
import LoginPrompt from './LoginPrompt';

{user.age > 18 ? <AdultContent /> : <MinorContent />}

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn ? <UserProfile /> : <LoginPrompt />}
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

function UserProfile() {
  return <h1>Welcome to your profile!</h1>;
}

function LoginPrompt() {
  return <h1>Please log in.</h1>;
}

export default App;