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

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 
                 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>
                  
                
            </>
          ))}

CodePudding user response：

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 
    role={ 'button'}
   name={repo?.name}
   role={'button'}
   onClick={e => setFav( [...fav, e.target.getAttribute('name')] )}

CodePudding user response：

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.