title: props value is undefined in React js Hooks
body: <p>I am writing a notepad web application. I am using React Hooks to use state variables. I am fetching data from an api using <code>axios</code>. Data contains a list of objects containing <code>_id</code>, <code>title</code>, <code>status</code> and <code>detail</code>. I am passing three values to <code>update button</code> as attributes and in <code>onClick()</code> method I am setting the values of my state variables using these attributes. Then these values are sent as props to a <code>UpdateTask</code> component. The probles is, two (_id and title) of those three variables are getting the correct value but one variable (detail) is getting undefined value. following is my code.</p>
  <pre><code>
  import React, {useState, useEffect} from 'react';
  import axios from 'axios';
  
  import UpdateTask from './UpdateTask.jsx';
  import DeleteTask from './DeleteTask.jsx';
  
  
  
  function Tasks()
  {
      useEffect(()=&gt;
      {
          async function fetchingData()
          {
              const tasks = await axios('http://127.0.0.1:8000/tasks');
              setTasks(tasks.data)
              
          };
          fetchingData();
      })
  
      function handleUpdateClick(e)
      {
          setViewUpdate(!viewUpdate);
          setUpdateId(e.target.id);
          setUpdateTitle(e.target.title);
          setUpdateDetail(e.target.detail);
          console.log(e.target)
      }
  
      function handleDeleteClick(e)
      {
          setViewDelete(!viewDelete);
          setDeleteId(e.target.id)
      }
  
      const [tasks, setTasks] = useState([]);
  
      const [viewUpdate, setViewUpdate] = useState(false);
      const [updateId, setUpdateId] = useState(null);
      const [updateTitle, setUpdateTitle] = useState('');
      const [updateDetail, setUpdateDetail] = useState('');
  
      const [viewDelete, setViewDelete] = useState(false);
      const [deleteId, setDeleteId] = useState(null);
  
      var listTasks = tasks.map((task)=&gt;
      {
      return(
          &lt;li className=&quot;main-task-list-items task-main&quot; key={task._id} id={task._id}&gt; 
              &lt;h1&gt;{task.title}&lt;/h1&gt;
              &lt;p&gt;{task.detail}&lt;/p&gt;
              &lt;p&gt;Status {task.status.toString()}&lt;/p&gt;
              &lt;button
                  className=&quot;task-main-btn btn btn-primary&quot;
                  id={task._id}
                  detail={task.detail}
                  title={task.title}
                  onClick={handleUpdateClick}
              &gt;
                  Update Task
              &lt;/button&gt;
              &lt;button
                  className=&quot;task-main-btn btn btn-danger&quot;
                  id={task._id}
                  onClick={handleDeleteClick}
              &gt;
                  Delete Task
              &lt;/button&gt;
          &lt;/li&gt;
          );
      })
      
      return(
          &lt;div&gt;
              &lt;ul&gt;{listTasks}&lt;/ul&gt;
              {viewUpdate ? &lt;UpdateTask title={updateTitle} detail={updateDetail} id={updateId} handleCancel={handleUpdateClick} /&gt; : null }
              {viewDelete ? &lt;DeleteTask id={deleteId} handleNo={handleDeleteClick}/&gt; : null }
          &lt;/div&gt;
      )
  }
  
  export default Tasks;
  </code></pre>
  <p>can anyone help me to solve this?</p>