인프런 커뮤니티 질문&답변

import React, {useState} from "react";
import "./App.css";

export default function App () {


  const [todoData, setTodoData] = useState([
    {
      id:"1",
      title:"공부하기",
      completed: false,
    },
    {
      id:"2",
      title:"청소하기",
      completed: false,
    }
  ]);
  const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수
  
  const btnStyle ={
    color: "#fff",
    border: "none",
    padding: "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float:"right",
  };
  
  const getStyle = (completed) => {
      return{
        padding:"10px",
        borderBottom:"1px #ccc dotted",
        textDecoration: completed ? 'line-through' : "none",
      };
  };

  const handleClick = (id) =>{
    let newTodoData = todoData.filter(data => data.id !== id)
    console.log("newTodoData",newTodoData)
    setTodoData(newTodoData);

  };

  const handleChange = (event) => {
      console.log("event",event.target.Value)
      setTodoData(event.target.Value);
  };

  const handleSubmit = (event) =>{  
    console.log("event",event)
    event.preventDefault(); // reload를 막아줌

    // 새로운 할일 데이터
    let newTodo ={  
      id: Date.now(),
      title : Value,
      completed: false,
    };
    
    // 원래 있던 할 일에 새로운 할일을 더해주기
    setTodoData(prev => [...prev,newTodo]);
    setValue("");
  };

  const handleCompleteChange = (id) => {
      console.log("todoData",todoData)
      let newTodoData = todoData.map((data) =>{
        if(data.id === id){
          data.completed = !data.completed;
        }
        return  data;
      });
      setTodoData(newTodoData)
  };

  
    return (
    <div className="container"> 
      <div className="todoBlock">
        <div className="title">
            <h1>할일 목록</h1> 
        </div>
      
        {todoData.map((data) => (
        <div style={getStyle(data.completed)} key={data.id}>
          <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/>
          {data.title}
          <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button>
        </div>
        ))}

        <form style={{display:'flex'}} onSubmit={handleSubmit}>
          <input 
          type="text" 
          name="value" 
          style={{flex:'10', pedding:'50'}}
          placeholder="해야 할 일을 입력하세요."
          value={Value}
          onChange={handleChange}/>
          
          <input
          type="submit"
          value="입력"
          className="btn"
          style={{flex:'1'}}
          />
        </form>
      </div>
    </div>
    );
  
}

아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

에러가 발생하는지 도저히 모르겠습니다.

혹시 아시는분 답변 부탁드립니다.

감사합니다.