title: How do I add the ability to edit text within a react component?
body: <p>So here's the user function I'm trying to create:
  1.) User double clicks on text
  2.) Text turns into input field where user can edit text
  3.) User hits enter, and upon submission, text is updated to be edited text.
  Basically, it's just an edit function where the user can change certain blocks of text.</p>
  <p>So here's my problem - I can turn the text into an input field upon a double click, but how do I get the edited text submitted and rendered?</p>
  <p>My parent component, App.js, stores the function to update the App state (updateHandler). The updated information needs to be passed from the Tasks.jsx component, which is where the text input is being handled. I should also point out that some props are being sent to Tasks via TaskList. Code as follows:</p>
  <p>App.js</p>
  <pre><code>import React, {useState} from 'react';
  import Header from './Header'
  import Card from './Card'
  import cardData from './cardData'
  import Dates from './Dates'
  import Tasks from './Tasks'
  import Footer from './Footer'
  import TaskList from './TaskList'
  
  const jobItems= [
    {
        id:8,
        chore: 'wash dishes'
    },
    {
        id:9,
        chore: 'do laundry'
    },
    {
        id:10,
        chore: 'clean bathroom'
    }
  
  ]
  
  function App() {
  
    const [listOfTasks, setTasks] = useState(jobItems)
  
    const updateHandler = (task) =&gt; {
      setTasks(listOfTasks.map(item =&gt; {
        if(item.id === task.id) {
          return {
            ...item,
            chore: task.chore
          }
        } else {
          return task
        }
      }))
    }
  
  const cardComponents = cardData.map(card =&gt; {
    return &lt;Card key = {card.id} name = {card.name}/&gt;
  })
  
  return (
    &lt;div&gt;
      &lt;Header/&gt;
      &lt;Dates/&gt;
      &lt;div className = 'card-container'&gt;
      {cardComponents}
      &lt;/div&gt;
      &lt;TaskList jobItems = {listOfTasks} setTasks = {setTasks} updateHandler = {updateHandler}/&gt;
      &lt;div&gt;
        &lt;Footer/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  )
  }
  
  export default App;
  </code></pre>
  <p>Tasks.jsx</p>
  <pre><code>import React, {useState} from 'react'
  
  function Tasks (props) {
  
  const [isEditing, setIsEditing] = useState(false)
  
  
  
      return(
          &lt;div className = 'tasks-container'&gt;
              {
                  isEditing ? 
                  &lt;form&gt;
                  &lt;input type = 'text' defaultValue = {props.item.chore}/&gt; 
                  &lt;/form&gt;
                  : &lt;h1 onDoubleClick ={()=&gt; setIsEditing(true)}&gt;{props.item.chore}&lt;/h1&gt;
              }
          &lt;/div&gt;
          
      )
  }
  
  export default Tasks
  
  </code></pre>
  <p>TaskList.jsx</p>
  <pre><code>import React from 'react'
  import Tasks from './Tasks'
  
  
  
  function TaskList (props) {
  
      const settingTasks = props.setTasks //might need 'this'
  
      return (
          &lt;div&gt;
              {
                  props.jobItems.map(item =&gt; {
                      return &lt;Tasks key = {item.id} item = {item} setTasks = {settingTasks} jobItems ={props.jobItems} updateHandler = {props.updateHandler}/&gt;
                  })
              }
          &lt;/div&gt;
      )
  }
  
  export default TaskList
  </code></pre>