Question 226900 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Setting useState hook at first click returns undefined

I’m having trouble setting the taskID at my useState hook.

once I click the button it returns me undefined but once I refresh the whole page it works perfectly.

I was suspecting that the reason for this was the way I map arrays because it’s nested.

here’s my code.

const [task_id, setGetid] = useState('')

    return (
        <div>
            {cart && Object.keys(cart).map(state => {
                return (
                    <div className='h-auto max-h-[60vh] w-[50vw] overflow-y-auto flex flex-row flex-wrap justify-center items-center mt-5 gap-4' key={cart[state]._id}>
                        {cart[state]?.list && Object.keys(cart[state]?.list).map(task => {
                            return (
                                <div className='bg-[#1c1e21] h-[6vh] w-[48vw] relative drop-shadow-md flex flex-row items-center justify-end' key={cart[state]?.list[task]?._id}>
                                    <span className='ml-5 text-white font-Poppins text-1xl absolute left-0'>{cart[state]?.list[task]?.task}</span>
                                    <form onSubmit={handleSubmit(patchHandler)}>
                                        <button type='submit' className='bg-[#01313d] text-md font-Poppins text-white drop-shadow-md h-[4vh] w-auto flex flex-row items-center pl-3 pr-3 mr-2 gap-1'>
                                            <FaEdit /> Edit
                                        </button>
                                    </form>
                                    <form onSubmit={deleteHandler}>
                                        <button type='submit' onClick={() => {
                                            setGetid(cart[state]?.list[task]?._id) // setState task ID returns undefined at first click and works perfectly after refreshing the whole page
                                        }} className='bg-[#01313d] text-md font-Poppins text-white drop-shadow-md h-[4vh] w-auto flex flex-row items-center pl-3 pr-3 mr-2 gap-1'>
                                            <FaTrash /> Remove
                                        </button>
                                    </form>
                                </div>
                            )
                        })}
                    </div>
                )
            })}
        </div>
    )
Tags:

2

Answers


  1. 0

    You’ve got an onSubmit event handler on the second form, but also an onClick event handler on the button type="submit" in that form. IDK what behavior that causes (i.e. what order do the callbacks get called, or does only one of them fire?), but try refactoring so you only use onSubmit on the form, or if the behavior of submitting is supposed to be different from the behavior of clicking the button, then the button should not be type="submit".

    I’m not sure what behavior you are currently getting because you say when you click the button "it returns undefined" — what do you mean? Is there a "TypeError cannot read property of undefined" error? Or does it set task_id to undefined? This is the kind of thing that would make a clearer question.

    BTW – you can probably just use cart.map(state =>, state.list.map(task =>, and task._id when you loop.

    Login or Signup to reply.
  2. 0

    With your implementation, when you click the button both deleteHandler and setGetid(cart[state]?.list[task]?._id) will run.

    Why do you want to do that? you can simply move setGetid(cart[state]?.list[task]?._id) to the deleteHandler function if you really want to execute both logics, because here, the issue of

    returns me undefined but once I refresh the whole page it works perfectly

    Should be related to the e.prevenDefault() of the deleteHandler function cutting in between. so if you get rid of the onClick event handler and move its code to deleteHandler it should work as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search