props value is undefined in React js Hooks

Question

I am writing a notepad web application. I am using React Hooks to use state variables. I am fetching data from an api using axios. Data contains a list of objects containing _id, title, status and detail. I am passing three values to update button as attributes and in onClick() method I am setting the values of my state variables using these attributes. Then these values are sent as props to a UpdateTask 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.

import React, {useState, useEffect} from 'react';
import axios from 'axios';

import UpdateTask from './UpdateTask.jsx';
import DeleteTask from './DeleteTask.jsx';



function Tasks()
{
    useEffect(()=>
    {
        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)=>
    {
    return(
        <li className="main-task-list-items task-main" key={task._id} id={task._id}> 
            <h1>{task.title}</h1>
            <p>{task.detail}</p>
            <p>Status {task.status.toString()}</p>
            <button
                className="task-main-btn btn btn-primary"
                id={task._id}
                detail={task.detail}
                title={task.title}
                onClick={handleUpdateClick}
            >
                Update Task
            </button>
            <button
                className="task-main-btn btn btn-danger"
                id={task._id}
                onClick={handleDeleteClick}
            >
                Delete Task
            </button>
        </li>
        );
    })
    
    return(
        <div>
            <ul>{listTasks}</ul>
            {viewUpdate ? <UpdateTask title={updateTitle} detail={updateDetail} id={updateId} handleCancel={handleUpdateClick} /> : null }
            {viewDelete ? <DeleteTask id={deleteId} handleNo={handleDeleteClick}/> : null }
        </div>
    )
}

export default Tasks;

can anyone help me to solve this?

Answer 1

Try adding onClick by wrapping up with function and pass task - onClick={ () => handleUpdateClick(task)}

function handleUpdateClick(task) {
        setViewUpdate(!viewUpdate);
        setUpdateId(task._id);
        setUpdateTitle(task.title);
        setUpdateDetail(task.detail);
}

Update this in your function call.! Try this

You are able to get id and title because it comes under eventtarget. Detail is not the property of eventTarget. that might be the issue.