Cuando se hace clic, quiero pasar el accesorio de nombre al enlace de estado, pero devuelve indefinido
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> </> ))}Si desea agregar un nombre a la matriz existente de fav , use actualizaciones funcionales en su lugar:
onClick={e => setFav(fav => [...fav, e.target.name])}Se recomienda que los estados se traten como de solo lectura: cualquier modificación al estado actual que se base en el estado anterior debe usar el patrón de actualización funcional. Esto permite que React realice cambios por lotes en el estado juntos: vea una explicación más detallada en esta respuesta .
De acuerdo con https://docs.w3cub.com/dom/element/name , el nombre oficialmente solo se aplica a los siguientes elementos: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea> .
Entonces, dado que ha utilizado el atributo de nombre en la etiqueta i , debe intentar obtener el valor del nombre mediante getAtrribute , así:
<i class="far fa-star pe-2" role={ 'button'} name={repo?.name} role={'button'} onClick={e => setFav( [...fav, e.target.getAttribute('name')] )}