Chave Key do componente em Javascript

Front-end
,
#1

Estou com um problema para recuperar a chave key de um componente <li>.
Quero recupera-lo para poder fazer uma verificação para saber se a sala está com o status on ou off.

Segue o código…

Fazendo um console.log em rooms recebo um Array com todas as salas listada para aquele determinado estudante, porém o índice de pesquisa delas são incrementados e não a chave id da minha sala.

export default function Profile() {
    const [rooms, setRooms] = useState([]);
    const history = useHistory();
    const studentCpf = localStorage.getItem('studentCpf');
    const studentName = localStorage.getItem('studentName');
    useEffect(() => {
        api.get('profile', {
            headers: {
                Authorization: studentCpf,
            }
        }).then(response => {
            setRooms(response.data);
        })

    }, [studentCpf]);

    function handleLogout() {
        localStorage.clear();
        history.push('/sessions')
	}

    function handleRoom(e){
		e.preventDefault();
		console.log(rooms);
		const idR = rooms.idRoom;
		if(idR.statusRoom === 0){
			alert(`Essa sala no momento está fechada. Ela abrirá as ${idR.schedule}`);
		}else{
			history.push(`/room/${idR.idRoom}`);
		}
	}

    return (

        <div className="profile-container">
            <header>
                <img src={schoolIso} alt="school Isotipo" />
                <span>Bem vindo, {studentName}</span>
                <Link className="button" to="">Agenda</Link>
                <button onClick={handleLogout} type="button">
                    <FiPower size={18} color="#E02041" />
                </button>
            </header>
            <h1>Salas</h1>
            <ul onClick={handleRoom} >
                {rooms.map(room => (
                    <li key={room.idRoom}>
                        <strong>DISCIPLINA:</strong>
                        <p>{room.disciplineRoom}</p>
                    </li>   
                ))}    
            </ul>
        </div>
    );
}

segue a imagem de como esta a resposta do console.log no navegador.

web
web.jpg1363×627 70.7 KB

#2

Esse key é um valor que só o React tem controle (esse key server para o React saber e não se perder na interação desse li), ele não faz parte do <li>, então tem que fazer outra estratégia. Talvez um componente, ou uma função nesse map que armazene esse valor.!

1 curtida
#3

Os materiais do React estão muito desatualizados, então fui fatiando o problema em em fatias menores até descobrir um jeito prático de enviar os dados para a function, e cheguei ao seguinte resultado:

export default function Profile() {
const [rooms, setRooms] = useState([]);
const history = useHistory();


const studentCpf = localStorage.getItem('studentCpf');
const studentName = localStorage.getItem('studentName');


useEffect(() => {
    api.get('profile', {
        headers: {
            Authorization: studentCpf,
        }
    }).then(response => {
        setRooms(response.data);
    })
}, [studentCpf]);

function handleLogout() {
    localStorage.clear();

    history.push('/sessions');
}

function handleRoom(e){

    if(e.statusRoom === 0){
        alert(`Essa sala no momento está fechada. Ela abrirá as ${e.schedule}`);
    }else{
        history.push(`/room/${e.idRoom}`);
    }
}

return (
    <div className="profile-container">
        <header>
            <img src={schoolIso} alt="school Isotipo" />
            <span>Bem vindo, {studentName}</span>

            <Link className="button" to="">Agenda</Link>
            <button onClick={handleLogout} type="button">
                <FiPower size={18} color="#E02041" />
            </button>
        </header>

        <h1>Salas</h1>
        
        <ul>
            {rooms.map(room => (
                <li key={room.idRoom} id={room.idRoom} onClick={e => handleRoom(room, e)} >

                    <strong>DISCIPLINA:</strong>
                    <p>{room.disciplineRoom}</p>

                    <strong>Status:</strong>
                    <p>{room.statusRoom}</p>

                    <strong>Horário:</strong>
                    <p>{room.schedule}</p>
                    
                </li>   
            ))}    
        </ul>
    </div>
);

}

criei um evento no OnClick que permite eu passar um array e um evento.