Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Problema com o props.itens.map

Estou fazendo um projeto similar ao curso para conseguir de fato aprender, porém me deparei com um erro que não estou sabendo solucionar: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meu codigo está assim:

import './ListaSuspensa.css'

const ListaSuspensa = (props) => {
    return (
        <div className='lista-suspensa'>
            <label>{props.label}</label>
            <select onChange={evento => props.aoAlterado(evento.target.value)} required={props.required} value={props.value}>
                {props.itens.map(item => {
                    return <option key={item}>{item}</option>
                })}
            </select>
        </div>
    )
}

export default ListaSuspensa
import { useState } from "react"
import "./Formulario.css"
import Botao from "../botao/Index"
import CampoTexto from "../campoTexto/Index"
import ListaSuspensa from "../listaSuspensa/Index"

const Formulario = (props) => {
    const [tarefa, setTarefa] = useState('')
    const [descricao, setDescricao] = useState('')
    const [imagem, setImagem] = useState('')
    const [prazo, setPrazo] = useState('')

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.TarefaCadastrada({
            tarefa,
            descricao,
            imagem,
            prazo
        })

        setTarefa('')
        setDescricao('')
        setImagem('')
        setPrazo('')

    }



    return (
        <section className="form">
            <form onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar sua Tarefa</h2>
                <CampoTexto
                    obrigatorio={true}
                    label="Nome da Tarefa"
                    placeholder="Digite o nome da Tarefa"
                    valor={tarefa}
                    aoAlterado={valor => setTarefa(valor)}
                />
                <CampoTexto
                    obrigatorio={true}
                    label="Descrição da Tarefa"
                    placeholder="Digite a Descrição da Tarefa"
                    valor={descricao}
                    aoAlterado={valor => setDescricao(valor)}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Digite o endereço da imagem"
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Prazo"
                    itens={props.prazo}
                    valor={prazo}
                    aoAlterado={valor => setPrazo(valor)}
                />
                <Botao>
                    Criar Tarefa
                </Botao>
            </form>
        </section>

    )
}
export default Formulario
import { useState } from 'react';
import Banner from "./components/banner/Index"
import Formulario from "./components/formulario/Index"
import Prazo from './components/prazo/Index';

function App() {

  const prazos = [
    {
      nome: 'Hoje',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF',
    },
    {
      nome: 'Semana',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2',
    },
    {
      nome: 'Mês',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8',
    },
    {
      nome: 'Objetivo do Ano',
      corPrimaria: '#D86EBF',
      corSecundaria: '#FAE5F5',
    },
    {
      nome: 'Já Feito',
      corPrimaria: '#FEBA05',
      corSecundaria: '#FFF5D9',
    },
    {
      nome: 'Conquistas',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF',
    }
  ]
  const [cards, setCards] = useState([])

  const NovoCardAdd = (card) => {
    console.log(card)
    setCards([...cards, card])
  }
  //colaboradores = card ; prazos = times
  return (
    <div className="App">
      <Banner />
      <Formulario prazos={prazos.map(prazo => prazo.tarefa)} TarefaCadastrada={card => NovoCardAdd(card)} />
      {prazos.map(prazo => <Prazo
        key={prazo.tarefa}
        tarefa={prazo.tarefa}
        corPrimaria={prazo.corPrimaria}
        corSecundaria={prazo.corSecundaria}
        cards={cards.filter(card => card.prazo === prazo.tarefa)}
      />)}
    </div>
  )
}

export default App
1 resposta
solução!

Salve, Gustavo!

Totalmente excelente! Praticando é que a gente aprende.

Sobre o seu código, eu acredito que o seu problema esteja por aqui:

      <Formulario prazos={prazos.map(prazo => prazo.tarefa)} TarefaCadastrada={card => NovoCardAdd(card)} />

Especificamente nessa instrução:

prazos.map(prazo => prazo.tarefa)

Você está mapeando os prazos e selecionado a propriedade tarefa, o que vai resultar num array de vários itens undefined porque, segundo o seu array de prazos, cada prazo não possui essa propriedade tarefa:

const prazos = [
    {
      nome: 'Hoje',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF',
    },
    {
      nome: 'Semana',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2',
    },
    {
      nome: 'Mês',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8',
    },
    {
      nome: 'Objetivo do Ano',
      corPrimaria: '#D86EBF',
      corSecundaria: '#FAE5F5',
    },
    {
      nome: 'Já Feito',
      corPrimaria: '#FEBA05',
      corSecundaria: '#FFF5D9',
    },
    {
      nome: 'Conquistas',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF',
    }
  ]

Tem algum motivo pra você fazer esse map?

Passar o array de prazos como eles são pode resolver seu problema:

      <Formulario prazos={prazos} TarefaCadastrada={card => NovoCardAdd(card)} />

Mas o legal é entender o seu objetivo! Mas acredito que esse primeiro passo pode ser um bom começo :)