1

Olá, estou tentando retornar um par de chave e valor usando a função map(), porem estou passando as informações ao meu componente via props, o meu componente recebe um texto e um value dentro dele e retorna um Option contendo esses valores.

Como vocês podem ver no código cada option tem um value e um text. Eu criei uma variável data que é um objeto com os valores mas quando eu faço o map ele exibe o array inteiro (sim está errado) porem eu não sei uma forma de fazer com que uma variável retorna o par de chave e valor, pois a minha ideia é passar um array de objetos, ou um array (não sei qual seria o jeito certo) e usar o map para percorrer retornando o value e o optionValue para o Option.

Obs: Cada optionValue precisa ter um option para que posteriormente esses valores possam ser capturados de alguma forma.

Havia tentado fazer um map() dentro de outro map() mas não deu certo.

Gostaria de saber uma forma de fazer isso da maneira correta, desde já agradeço ^^

const data = [
{
  optionValue: ['Teste1', 'Teste2', 'Teste3'],
},
{
  value: ['value1', 'value2', 'value3'],
},

];

 <Date option={data} />

Outro arquivo!

function Date({ option }) {
  return (
     <Select>
      {option.map((opt) => (
        <Option value={opt.optionValue}>{opt.value}</Option>
      ))}
    </Select>
   )    
 }

img

2
  • 1
    A variável data não pode ser um array com objetos já com a estrutura desejada? Tipo: const data = [{chave:'Teste1', value:'value1'},{chave:'Teste2',value:'value2'}].
    – TiagoA
    9/06/2020 às 12:12
  • dessa forma ele não aconteceria um conflito entre os objetos justamente por terem o mesmo nome?
    – Pedro
    9/06/2020 às 15:07

1 Resposta 1

2

O objeto data é muito ruim para esse tipo de tarefa. Se você tiver a opção de editá-lo para um array de pares { option, value}, tudo ficará melhor. Se você não tiver essa opção, por exemplo, se data é obtido via API, então você precisa transformar este objeto em algo melhor. Para transformar

const data = [
  {
    optionValue: ["Teste1", "Teste2", "Teste3"]
  },
  {
    value: ["value1", "value2", "value3"]
  }
];

em

const data2 = [
  {
    option: "Teste1",
    value: "value1"
  },
  {
    option: "Teste2",
    value: "value2"
  },
  {
    option: "Teste3",
    value: "value3"
  }
];

basta fazer

  const options = data[0].optionValue;
  const values = data[1].value;
  const pairs = options.map((option, index) => ({
    option,
    value: values[index]
  }));

Esta transformação só funciona caso os arrays optionValue e value tenham o mesmo tamanho e estejam na ordem correta. Daí, dentro do componente Date, basta fazer um map neste array de pares:

<Select>
  {option.map(opt => (
    <Option value={opt.value}>{opt.option}</option>
  ))}
</Select>

Fiz um exemplo no CodeSandbox.

1
  • 1
    muito obrigado pela ajuda, ficou claro e facil o entendimento ^^
    – Pedro
    11/06/2020 às 11:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .