Estou tentando criar um programa em React em que o usuário poderá escolher salas de acordo com os horários. Ele não poderá escolher mais de uma sala por horário. As informações das salas vem por meio de uma API que traz esses dados.
Ao clicar em uma sala, o onclick() recebe a informação da sala escolhida e manda o ID para a função choosenClasroom(), que vai colocar o estado da seleção de salas como true. Esse estado vai servir de base para que o programa estilize e desabilite as outras opções de salas.
Atualmente, ao selecionar uma sala (clicar em um botão), todas as outras salas são selecionadas também. Alguém pode me ajudar a entender esse erro?
import React, { Fragment, useState } from 'react';
import './Card.css';
import { rooms } from '../../api/rooms';
const Card = () => {
function chosenClassroom(id) {
const room = rooms.find(room => room.id === id);
setSelected(true);
}
const [selected, setSelected] = useState(false);
return(
<Fragment>
<div className='centralizeContainer'>
<div className='cardContainer'>
<h2 className='titleCard'>Selecione as salas</h2>
<div className='classroomContainer'>
<div className='schedules'>
<div className='schedulesText'><h4>09:00</h4></div>
</div>
<div className='classroomDataContainer'>
{rooms.map((room) => (
<div className='classroomData' key={room.id}>
<button
disabled={selected}
className={selected? 'classroomButton selected': 'classroomButton'}
onClick={() => chosenClassroom(room.id)}>
<p className='classromName'>{room.nome}</p>
</button>
<div className='classroomVacancies'>
<h5>{room.vagas} vagas</h5>
</div>
</div>
))}
</div>
<div className='buttonContainer'>
<button className='confirmationButton'>
<p className='buttonText'>Confirmar salas</p>
</button>
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default Card
array
que você monta a tela precisa ter um campo de status que pode ser feito um novoarray
a partir do métodomap
, com isso você tem o status de cada item doarray
e ai a sua seleção vai ficar individualizada igual você precisa