Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
Display data into dropdown using JSON payload data

I have this JSON returned from the server:

[
   {
      "symbol":"one option"
   },
   {
      "symbol":"second option"
   }
   .......
]

Service to get the data:

        useEffect(() => {
                const requestOptions = {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include',
                };
        
                fetch('/data', requestOptions)
                    .then((response) => {
                        if (response.status !== 200) {
                            throw new Error(response.status);
                        } else {
                            return response.json();
                        }
                    })
                    .then(
                        (futurePairs) => {
                            console.log(futurePairs)
                            props.onSetAvailableFuturesPairs(futurePairs);
                        },
                        (error) => {
                            console.log(error);
                        }
                    );
            }, []);
    

......

onSetAvailableFuturesPairs: addAvailableFuturesPair,

......

        export const ADD_AVAILABLE_FUTURES_PAIR = 'availableFuturesPairs:addAvailableFuturesPairs';
        
        export function addAvailableFuturesPair(newPair) {
            return {
                type: ADD_AVAILABLE_FUTURES_PAIR,
                payload: {
                    newPair: newPair
                }
            }
        }

......

availableFuturesPairs: [],

......

Display data:

                        <Select
                            onChange={event => changeSelectedFuturesPair(event.target.value)}
                            value={props.selectedFuturesPair}>
                            {props.availableFuturesPairs.map((option) => (
                                <option key={option.symbol} value={option.symbol}>{option.symbol}</option>
                            ))}
                        </Select>

But I get error:

`Warning: Each child in a list should have a unique "key" prop.`

Do you know how I can fix this?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Try with index to pass into the key prop

{props.availableFuturesPairs.map((option) => (
                                <option key={option.symbol} value={option.symbol}>{option.symbol}</option>
                            ))}

Updated:

{props.availableFuturesPairs.map((option, index) => (
                                <option 
key={index} 
value={option.symbol}
>{option.symbol}</option>
                            ))}
about 4 years ago · Juan Pablo Isaza Relatório

0

You can provide index as second parameter to arrow function

props.availableFuturesPairs.map((option,index) => (
                                <option key={index} value={option.symbol}>{option.symbol}</option>
                            ))

or install uuidv4

and use it as

props.availableFuturesPairs.map((option) => (
                                <option key={uuidv4()} value={option.symbol}>{option.symbol}</option>
                            ))
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda