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>
</>
))}
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.
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')] )}