title: setState in react and passing props with functions
body: <p>i'm new to react and just got into the field of props and passing functions, and my task was to make the app work with the given component, I tried to fix it and I got in one of those moment when you fix something and you don't now what happened :) </p>
  
  <p>the issue was cutting part of the main code and make another component:</p>
  
  <p>this is the main app code:</p>
  
  <pre><code>import React, { useState } from "react";
  import ToDoItem from "./ToDoItem";
  import InputArea from "./InputArea";
  
  function App() {
    const [inputText, setInputText] = useState("");
    const [items, setItems] = useState([]);
  
    function handleChange(event) {
      const newValue = event.target.value;
      setInputText(newValue);
    }
  
    function addItem() {
      setItems(prevItems =&gt; {
        return [...prevItems, inputText];
      });
      setInputText("");
    }
  
    function deleteItem(id) {
      setItems(prevItems =&gt; {
        return prevItems.filter((item, index) =&gt; {
          return index !== id;
        });
      });
    }
  
    return (
      &lt;div className="container"&gt;
        &lt;div className="heading"&gt;
          &lt;h1&gt;To-Do List&lt;/h1&gt;
        &lt;/div&gt;
        &lt;InputArea 
        inputText={inputText}
        onTyping={handleChange}
        addItem={addItem}
        /&gt;
        &lt;div&gt;
          &lt;ul&gt;
            {items.map((todoItem, index) =&gt; (
              &lt;ToDoItem
                key={index}
                id={index}
                text={todoItem}
                onChecked={deleteItem}
              /&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  
  <p>and this is the component code:</p>
  
  <pre><code>import React from "react";
  
  function InputArea(props) {
    return (
      &lt;div className="form"&gt;
        &lt;input onChange={(e)=&gt;{
          props.onTyping(e)
        }} type="text" value={props.inputText} /&gt;
        &lt;button onClick={()=&gt;{
          props.addItem()
        }}&gt;
          &lt;span&gt;Add&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default InputArea;
  
  </code></pre>
  
  <p>so ... the problem was to try passing the state of the input field from the main app to the component and I faced the issue of <code>const newValue = event.target.value;</code>is not defined, and then I tried this in the component code <code>&lt;input onChange={(e)=&gt;{
          props.onTyping(e)
        }}</code> before it was <code>&lt;input onChange={()=&gt;{
          props.onTyping()
        }}</code>
  and somehow it works just fine and perfectly !!!, can someone please explain why and how did it worked?</p>
  
  <p>P.S: I'm not good at writing questions so please any comment on the question is helpful to improve my structure, thank you.</p>