single-responsibilty-broken.js

import { useState } from "react";

export default function App() {
  const [people, setPeople] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    setPeople([...people, event.target.person.value]);
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Nova pessoa: <br />
          <input name="person" />
        </label>
        <button type="submit">Criar</button>
      </form>
      <p>Pessoas:</p>
      <ul>
        {people.map((person) => (
          <li key={person}>{person}</li>
        ))}
      </ul>
    </div>
  );
}