function Text({ text }) {
  const [value, setValue] = useState(text);
 
  return <div>{value}</div>;
}
 
function Counter() {
  const [list, setList] = useState(["A", "B", "C", "D"]);
  const handleListInsertClick = () => {
    setList((prevList) => ["E"].concat(prevList));
  };
 
  return (
    <div>
      <div>
        {list.map((item, index) => (
          <Text key={index} text={item} />
        ))}
      </div>
      <div>
        <button onClick={handleListInsertClick}>insert E</button>
      </div>
    </div>
  );
}