O app renderiza mais de uma vez. Não sei como isso é possivel, pois antes de criar os times e chamar o componente team, tava tudo certo. Eu até removi pra ver se era o componente pra ver havia algo de errado, mas continua dando erro. Algo está fazendo o react renderizar mais de uma vez, e eu não tenho mais ideia do que possa ser.
App.jsx:
import { useState } from 'react';
import Banner from './components/Banner';
import RegisterForm from './components/RegisterForm';
// import Team from './components/Teams'
function App() {
console.log('render')
const teams = [
{
name: 'Programação',
mainColor: '#57C278',
backgroundColor: '#D9F7E9'
},
{
name: 'Front-End',
mainColor: '#82CFFA',
backgroundColor: '#E8F8FF'
},
{
name: 'Data Science',
mainColor: '#A6D157',
backgroundColor: '#F0F8E2'
},
{
name: 'Devops',
mainColor: '#E06B69',
backgroundColor: '#FDE7E8'
},
{
name: 'UX e Design',
mainColor: '#DB6EBF',
backgroundColor: '#FAE9F5'
},
{
name: 'Mobile',
mainColor: '#FFBA05',
backgroundColor: '#FFF5D9'
},
{
name: 'Inovação e Gestão',
mainColor: '#FF8A29',
backgroundColor: '#FFEEDF'
}
]
const [collaborators, setCollaborators] = useState([])
const onCollaboratorRegistered = (collaborator) => {
setCollaborators([...collaborators, collaborator])
console.log(collaborator)
}
return (
<div className="App">
<Banner />
<RegisterForm addNewCollaborator={collaborator => onCollaboratorRegistered(collaborator)} teams={teams} />
</div>
);
}
export default App;
Team.jsx:
import './Team.css'
export const Team = (props) => {
return (
<section className='team' style={{backgroundColor: props.backgroundColor}}>
<h3>{props.name}</h3>
<hr style={{borderColor: props.mainColor}}/>
</section>
)
}
e no console, ele renderiza duas vezes, depois da erro, depois renderiza duas vezes de novo e de novo erro