[react]useState사용해서 배열에 값 추가하기. (a.k.a TODOLIST)

/* eslint-disable no-console */
import React, { useState } from 'react';
import styled from 'styled-components';

const TodoStyle = styled.div`
  display: block;
  padding: 30px;
  border-bottom: 3px dashed darkorange;
`;

const PracticeTodoList = () => {
  const [textValue, setTextValue] = useState('');
  const [enters, setEnters] = useState([]);

  const onChange = e => {
    setTextValue(e.target.value);
  };

  const onCreate = e => {
    setEnters(enters => [...enters, textValue]);
    setTextValue('');
  };

  return (
    <TodoStyle>      
      <h1 className="title">TodoList</h1>
      <input
       name="textValue"
       value={textValue}
       onChange={onChange}
       placeholder="할 일을 입력하세요."
      />
      <button onClick={onCreate} className="todoBtn">
       등록하기
      </button>
      <br />
      <b>값:{enters.map(ent => (<div>{ent}/div>))}</b>      
    </TodoStyle>
  );
};

export default PracticeTodoList;