Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problema com o Props do Filtro

Referente ao curso React: lidando com arquivos estáticos

por Jander Barbosa
| 109.4k xp | 3 posts

import React from 'react';
import filtros from './filtros.json';
import styles from './Filtros.module.scss';

type IOpcao = typeof filtros[0];

interface Props {
    filtro: number | null;
    setFiltro: React.Dispatch<React.SetStateAction<number | null>>;
}

export default function Filtros(({ filtro, setFiltro }: Props)) {

    function selecionarFiltro(opcao: IOpcao) {

    }
    return <div className={styles.filtros}>
        {filtros.map((opcao) => (
            <button className={styles.filtros__filtro} key={opcao.id} onClick={() => selecionarFiltro(opcao)}>

            </button>
        ))}
    </div>;
}

Erro:

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\Jander Tabosa\Desktop\Programação\Projetos\Projetos VSC\aluroni\src\pages\Cardapio\Filtros\index.tsx: Unexpected token (12:32)

2 respostas
por Jander Barbosa
| 109.4k xp | 3 posts

Eu resolvi o problema copiando e colando o código da aula, mas queria saber o que estava errado no meu código exatamente

solução!
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Jander, tudo bem?

Você tinha esquecido de abrir e fechar os () no Return, era pra ficar assim:

return (
    <div className={styles.filtros}>
      {filtros.map(opcao => (
        <button className={classNames({
          [styles.filtros__filtro]: true,
          [styles['filtros__filtro--ativo']]: filtro === opcao.id
        })} key={opcao.id} onClick={() => selecionarFiltro(opcao)}>
          {opcao.label}
        </button>
      ))}
    </div>
  )

Um abraço e bons estudos.