-2

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
5
  • Cara, tentei copiar seu código aqui pra ir testando mas as divs não estão fechando. Acho que consegui consertar aqui, mas se tiver como ver certinho e modificar ia ser uma boa .
    – Elias
    Commented 15/08/2022 às 0:18
  • Eu tentei deixar a parte que tinha mais relação com a pergunta, mas acho que algumas divs ficaram abertas mesmo. Colei tudo certinho agora. Commented 15/08/2022 às 0:26
  • 2
    Cara o que ta acontecendo é que o seu select esta valendo pra todos os itens da sua lista, então quando você muda esse select pra true ou false, ele vale pra todos os rooms. Vou explicar como contornar isso na resposta
    – Elias
    Commented 15/08/2022 às 0:30
  • 2
    No array que você monta a tela precisa ter um campo de status que pode ser feito um novo array a partir do método map, com isso você tem o status de cada item do array e ai a sua seleção vai ficar individualizada igual você precisa
    – novic
    Commented 15/08/2022 às 0:35
  • 2
    Isso! O correto também seria armazenar essa lista em um useState antes de fazer um map nela pra renderizar na tela. Outra coisa, essa rooms que você importa, ela é uma função assíncrona ou síncrona? To resolvendo aqui , e te explicar cada detalhe
    – Elias
    Commented 15/08/2022 às 0:42

1 Resposta 1

2

O exemplo que seria ideal pelas informações da sua pergunta é criar um novo array e adicionar um campo com o tipo boleano (verdadeiro ou falso) e com esse novo campo ter em cada item da lista o seu status e com isso mudar também a parte dos componentes a serem criados.

Nesse exemplo mudei o status de um botão que muda a cor para vermelho ou azul respectivamente false e true:

const rooms = [
    {'id': 1, 'desc': 'Tarefa 1'},
    {'id': 2, 'desc': 'Tarefa 2'},
    {'id': 3, 'desc': 'Tarefa 3'},
    {'id': 4, 'desc': 'Tarefa 4'},
    {'id': 5, 'desc': 'Tarefa 5'},
];
function App() {
  const [newRooms, setNewRooms] = React.useState
  (
    rooms.map((i) => ({...i, select: false}))  // criando o novo campo
  );  
  function handleChangeSelect(id) {
    setNewRooms(state => newRooms.map((i) => {
      if (i.id === id) {
        i.select = !i.select // alterando o status da lista
      }
      return i;
    }));
  }
  return (
    <div>
      <ul style={{listStyle: 'none'}}>
      {newRooms && newRooms.map((r, i) => (
        <li className="mt-1">
          <button 
          onClick={e => handleChangeSelect(r.id)}
          className={r.select?'btn btn-sm btn-primary':'btn btn-sm btn-danger'}>
            {r.desc}
          </button>
        </li>)
      )}
      </ul>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .