background | React: desenvolvendo com JavaScript | Alura

Boa tarde A cor (corSegundaria) do background dos times não está aparecendo, poderia me ajudar, não consigo achar aonde errei?

-> Apps.js "pasta raiz"

import { useState } from 'react'; import Banner from './componentes/Banner/Banner'; import Formulario from './componentes/Formulario'; import Time from './componentes/Time';

function App() { const times = [ { nome:'Programção', corPrimaria:'#57c278', corSegundaria:'#D9F7E9', }, { nome:'Front End', corPrimaria:'#B2CFFA', corSegundaria:'#E8F8FF', }, { nome:'Data Science', corPrimaria:'#A6D157', corSegundaria:'#FOf8E2', }, { nome:'Devops', corPrimaria:'#EO6B69', corSegundaria:'#FED7E8', }, { nome:'UX e Desing', corPrimaria:'#DB6EBF', corSegundaria:'#FAE9FS', }, { nome:'Mobile', corPrimaria:'#FFBA05', corSegundaria:'#FFF5D9', }, { nome:'Inovação e Gestão', corPrimaria:'#FF8A29', corSegundaria:'#FFEEDF', } ] const [colaboradores, setcolaboradores] = useState([]) const aoNovoColaboradorAdicionado = (colaborador) => { console.log(colaborador) setcolaboradores([...colaboradores, colaborador]) } return (

<Formulario aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)} /> {times.map(time => )}

); } export default App;

-> times.css

.time{
text-align: center;
padding: 32px;

} .time h3{ font-size: 32px; border-bottom: 4px solid; display: inline-block; /deixa a borda botom apenas no titulo/ padding: 8px; }

-> index.js (pasta Time)

import './Time.css' const Time = (props) => { const css = { backgroundColor: props.corSecundaria } return(

<h3 style={{ borderColor: props.corPrimaria }} >{props.nome} ) } export default Time

Oi, Anatalia!

Ó, eu dei uma olhadinha no seu código e achei alguns errinhos que podem estar levando a esse problema.

O primeiro e maior problema acredito que seja no arquivo "App.js". Aparentemente o código está incompleto. Você colocou o início da arrow function recebendo o elemento "time" (no times.map) mas não chegou a criar o componente passando suas props e os valores dessas props (key, nome, corPrimaria, corSecundaria e colaboradores). Não sei se foi um problema na hora de colar o código aqui ou se realmente está faltando. Dá uma verificada.

Um outro probleminha que achei foi no arquivo "index.js" dentro da pasta "Time". Ficou faltando você fechar a tag h3 dentro do return. Isso pode estar causando algum problema também.

Boa sorte!

Mergulhe em programação