Can't pass target.value to state hook return undefined - React.js React

Question

When clicked I want to pass name prop to state hook but it returns undefined

    const [fav, setFav ] = useState([]); 
    
         useEffect(() => {
        dispatch(fetchProfileAction(user));
        dispatch(fetchReposAction(user));
      }, [user, dispatch]);
    
            {reposList?.name !== "Error" &&
          reposList?.map(repo => (
            <>
                <div className="col-6 g-3 ">
                <div className="border rounded-pill px-3 py-2 bg-secondary  ">
                <i 
                class="far fa-star pe-2" role={ 'button'}
                name={repo?.name} role={'button'}
                onClick={e => setFav(...fav, e.target.name)}
                ></i> 
                <a
                    target="_blank"
                    href={repo?.html_url}
                    className="text-light"
                    name={repo?.name} role={'button'}
                    onClick={e => setFav(...fav, e.target.name)}
                  >
                    {repo?.name} 
                  </a>
                  <strong className="text-light ps-2">({repo?.language})</strong>
              </div>
            </div>
                  
                
            </>
          ))}

You should be spreading into an array: `setFav([...fav, e.target.name])` — Nick Parsons, Dec 25 '21 at 10:46
thanks but now it returns `[ undefined,undefined ] ` can't get proper data — Fatih Can, Dec 25 '21 at 10:48
What do you get in HTML-code on the page here `name={repo?.name}`? Is the attribute exist? — Alexandr, Dec 25 '21 at 10:52
It works well in text field returns proper name but i want to teke it to state hook by clickin element — Fatih Can, Dec 25 '21 at 10:54

score 2 · Answer 1 · answered Dec 25 '21 at 10:52

If you want to append a the name to the existing array of fav, then use functional updates instead:

onClick={e => setFav(fav => [...fav, e.target.name])}

It is recommend that states should be treated as readonly: any modifications to the current state that is based on the previous state should use the functional update pattern. This allows React to batch changes to the state together: see further explanation in this answer.

score 1 · Accepted Answer · answered Dec 25 '21 at 11:30

According to https://docs.w3cub.com/dom/element/name name officially only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

So, since you have used the name attribute on i tag, you should try to get the name value by getAtrribute, like this:

 <i 
   class="far fa-star pe-2" role={ 'button'}
   name={repo?.name}
   role={'button'}
   onClick={e => setFav( [...fav, e.target.getAttribute('name')] )}

Can't pass target.value to state hook return undefined - React.js React

2 Answers2

Linked

Related