Os checkboxs não estão funcionando

App.tsx import style from './App.module.scss'; import Card from './components/Card'; import Formulario from './components/Formulario'; import Calendario from './components/Calendario'; import ListaDeEventos from './components/ListaDeEventos'; import { RecoilRoot } from 'recoil' function App() { // const [eventos, setEventos] = useState<IEvento[]>([ // { // "descricao": "Estudar React", // "inicio": new Date("2022-01-15T09:00"), // "fim": new Date("2022-01-15T13:00"), // "completo": false, // "id": 1642342747 // }, // { // "descricao": "Estudar Recoil", // "inicio": new Date("2022-01-16T09:00"), // "fim": new Date("2022-01-16T11:00"), // "completo": false, // "id": 1642342959 // } // ]) //const [ setFiltro] = useState<Date | null>() //const adicionarEvento = (evento: IEvento) => { //evento.id = Math.round((new Date()).getTime() / 1000) // eventos.push(evento) // console.log(eventos); // setEventos([...eventos]) //} //const alterarStatusEvento = (id: number) => { // const evento = eventos.find(evento => evento.id === id) // if (evento) { // evento.completo = !evento.completo // } // setEventos([...eventos]) //} //const deletarEvento = (id: number) => { // setEventos([...eventos.filter(evento => evento.id !== id)]) //} const aplicarFiltro = (data: Date | null) => { //setFiltro(data) } // const filtrados = !filtro // ? eventos // : eventos.filter((evento) => // filtro!.toISOString().slice(0, 10) === evento.inicio.toISOString().slice(0, 10) // ); return ( <RecoilRoot> <div className={style.App}> <div className={style.Coluna}> <Card> <Formulario /> </Card> <hr /> <Card> <ListaDeEventos aoFiltroAplicado={aplicarFiltro} /> </Card> </div> <div className={style.Coluna}> <Calendario /> </div> </div> </RecoilRoot> ); } export default App;

listaDeEventos.tsx import React from 'react'; import Evento from '../Evento'; import Filtro from '../Filtro'; import style from './ListaDeEventos.module.scss'; import { useRecoilValue } from 'recoil'; import { ListaDeEventosState } from '../../state/atom'; const ListaDeEventos: React.FC<{ aoAlterarStatus?: (id: number) => void, aoDeletarEvento?: (id: number) => void, aoFiltroAplicado: (data: Date | null) => void }> = ({ aoFiltroAplicado, aoAlterarStatus, aoDeletarEvento }) => { const eventos = useRecoilValue(ListaDeEventosState); return (<section> <Filtro aoFiltroAplicado={aoFiltroAplicado} /> <div className={style.Scroll}> {eventos.map(evento => ( <Evento evento={evento} key={evento.id} /> ))} </div> </section>) } export default ListaDeEventos

Oi, Yan! Tudo bem?

O checkbox nao muda porque o componente Evento nao tem ligacao com o estado global. Em Recoil, voce precisa atualizar o atom usando useSetRecoilState ou passando funcoes por props.

1) Atom da lista:

// state/atom.ts
import { atom } from 'recoil';
import type { IEvento } from '../interfaces/IEvento';

export const ListaDeEventosState = atom<IEvento[]>({
  key: 'ListaDeEventosState',
  default: []
});

2) Hooks para alterar estado:

// state/hooks.ts
import { useSetRecoilState } from 'recoil';
import { ListaDeEventosState } from './atom';

export function useAlternarStatusEvento() {
  const setLista = useSetRecoilState(ListaDeEventosState);
  return (id: number) => {
    setLista(lista => lista.map(e =>
      e.id === id ? { ...e, completo: !e.completo } : e
    ));
  };
}
export function useDeletarEvento() {
  const setLista = useSetRecoilState(ListaDeEventosState);
  return (id: number) => {
    setLista(lista => lista.filter(e => e.id !== id));
  };
}

3) Ajuste do componente Evento:

// components/Evento/index.tsx
import React from 'react';
import { useAlternarStatusEvento, useDeletarEvento } from '../../state/hooks';
import type { IEvento } from '../../interfaces/IEvento';

const Evento: React.FC<{ evento: IEvento }> = ({ evento }) => {
  const alternar = useAlternarStatusEvento();
  const deletar = useDeletarEvento();
  return (
    <div>
      <input
        type="checkbox"
        checked={evento.completo}
        onChange={() => alternar(evento.id)} />
  &lt;span&gt;{evento.descricao}&lt;/span&gt;

  &lt;button onClick={() =&gt; deletar(evento.id)}&gt;remover&lt;/button&gt;
&lt;/div&gt;

  );
};
export default Evento;

Pontos importantes:

- Sempre use checked + onChange para checkbox controlado.
- Garanta que alguma funcao atualize o atom (alternar/deletar).
- Seu App ja esta dentro de <RecoilRoot>, isso esta correto.

Espero ter ajudado. Conte com o apoio do Forum na sua jornada. Fico a disposicao.

Abracos e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Garanta sua matrícula hoje e ganhe + 2 meses grátis