Um pequeno aviso: A versão do Organo que eu tô utilizando é baseada no curso React: Como os Componentes Funcionam
A refatoração no código do Times ficou quase completa, só que ao associar o id como 'string' eu não consigo deixar a refatoração completa, por causa do erro que tá no título, mas se eu removo o id no código do Times, ele fica normal e funciona, mas aí eu não consigo alterar a cor do Times no Organo:
Código do Times.tsx:
import { ICadastrado } from '../../compartilhado/interfaces/ICadastrado';
import Colaborador from '../Colaborador';
import './Times.css'
import hexToRgba from 'hex-to-rgba';
import React from "react";
interface TimesProps {
corFundo: string,
corDestaque: string,
nome: string,
cor: string
cadastrado: ICadastrado[],
mudarCor: (valor: string) => void,
id: string,
deletando: (valor: string) => void,
favoritando: (valor: string) => void,
}
const Times = ({cadastrado, nome, cor, mudarCor, id, deletando, favoritando}: TimesProps) => {
const corFundo = {backgroundColor: hexToRgba(cor, '0.6')}
const corDestaque = { borderColor: cor}
return (
(cadastrado.length > 0) ? <section className='Times' style={corFundo}>
<input onChange={evento => mudarCor(evento.target.value, id)} value={cor} type='color' className='inputCor'/>
<h3 style={corDestaque}>{nome}</h3>
<div className='colaboradores'>
{cadastrado.map(colaborador => {
return <Colaborador
key={colaborador.nome}
favorito={colaborador.favorito}
id={colaborador.id}
nome={colaborador.nome}
cargo={colaborador.cargo}
imagem={colaborador.imagem}
corDeFundo={cor}
deletando={deletando}
favoritando={favoritando}
/>
})}
</div>
</section>
: ''
)
}
export default Times
