Então, seguindo os passos da aula anterior (no caso, a Aula 4), no final os cards deixaram de aparecer quando clico para serem criados... e não entendi ainda por que. Até onde vi, está tudo certo.
App.js:
import { useState } from 'react';
import Banner from './componentes/Banner';
import Formulario from './componentes/Formulario';
import Time from './componentes/Time';
import Rodape from './componentes/Rodape'
function App() {
const times = [
{
nome: 'Programação',
corPrimaria: '#57C278',
corSecundaria: '#D9F7E9'
},
{
nome: 'Front-End',
corPrimaria: '#82CFFA',
corSecundaria: '#E8F8FF'
},
{
nome: 'Data Science',
corPrimaria: '#A6D157',
corSecundaria: '#F0F8E2'
},
{
nome: 'Devops',
corPrimaria: '#E06B69',
corSecundaria: '#FDE7E8'
},
{
nome: 'UX e Design',
corPrimaria: '#DB6EBF',
corSecundaria: '#FAE9F5'
},
{
nome: 'Mobile',
corPrimaria: '#FFBA05',
corSecundaria: '#FFF5D9'
},
{
nome: 'Inovação e Gestão',
corPrimaria: '#FF8A29',
corSecundaria: '#FFEEDF'
}
]
const [colaboradores, setColaboradores] = useState([])
const aoNovoColaboradorAdicionado = (colaborador) => {
setColaboradores([...colaboradores, colaborador])
}
return (
<div className="App">
<Banner />
<Formulario times={times.map(time => time.nome)} aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>
{times.map(time => <Time
key={time.nome}
nome={time.nome}
corPrimaria={time.corPrimaria}
corSecundaria={time.corSecundaria}
colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
/>)}
<Rodape />
</div>
);
}
export default App;
index.js de Time:
import Colaborador from '../Colaborador'
import './Time.css'
const Time = (props) => {
const css = { backgroundColor: props.corSecundaria }
return (
(props.colaboradores.lenght > 0) ? <section className='time' style={css}>
<h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
<div className='colaboradores'>
{props.colaboradores.map( colaborador => <Colaborador corDeFundo={props.corPrimaria} key={colaborador.nome} nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem}/> )}
</div>
</section>
: ''
)
}
export default Time
index.js de Formulario:
import { useState } from 'react'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
const Formulario = (props) => {
const [nome, setNome] = useState('')
const [cargo, setCargo] = useState('')
const [imagem, setImagem] = useState('')
const [time, setTime] = useState('')
const aoSalvar = (evento) => {
evento.preventDefault()
props.aoColaboradorCadastrado({
nome,
cargo,
imagem,
time
})
setNome('')
setCargo('')
setImagem('')
setTime('')
}
return (
<section className='formulario'>
<form onSubmit={aoSalvar}>
<h2>Preencha os dados para criar o card do colaborador</h2>
<CampoTexto obrigatorio={true} label="Nome" placeholder="Digite o seu Nome" valor={nome} aoAlterado={valor => setNome(valor)} />
<CampoTexto obrigatorio={true} label="Cargo" placeholder="Digite o seu Cargo" valor={cargo} aoAlterado={valor => setCargo(valor)} />
<CampoTexto label="Imagem" placeholder="Digite o endereço da imagem" valor={imagem} aoAlterado={valor => setImagem(valor)} />
<ListaSuspensa obrigatorio={true} label="Time" itens={props.times} valor={time} aoAlterado={valor => setTime(valor)} />
<Botao>
Criar Card
</Botao>
</form>
</section>
)
}
export default Formulario