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

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

    const [fav, setFav ] = useState([]); 
         useEffect(() => {
      }, [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  ">
                class="far fa-star pe-2" role={ 'button'}
                name={repo?.name} role={'button'}
                onClick={e => setFav(...fav,}
                    name={repo?.name} role={'button'}
                    onClick={e => setFav(...fav,}
                  <strong className="text-light ps-2">({repo?.language})</strong>

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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

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

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.

Solution 2

According to 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:

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

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply