#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

function App() {
  const [message, setMessage] = React.useState('Hello React!');
  const [show, setShow] = React.useState(true);
  const [todos, setTodos] = React.useState([
    { id: 1, text: 'Learn JavaScript' },
    { id: 2, text: 'Learn React' },
    { id: 3, text: 'Build something awesome' }
  ]);

  const reverseMessage = () => {
    setMessage((prevMessage) => prevMessage.split('').reverse().join(''));
  };

  return (
    <div id="app">
      <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
      <p>Message is: {message}</p>
      <button type="button" onClick={reverseMessage}>Reverse Message</button>
      <hr />
      {show ? <div>Now you see me</div> : <div>Now you don't</div>}
      <button type="button" onClick={() => setShow((prevShow) => !prevShow)}>Toggle Show</button>
      <hr />
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);