CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
user1285928
user1285928

Reputation: 1476

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?

Upvotes: 0

Views: 240

Answers (2)

Krushnasinh Jadeja
Krushnasinh Jadeja

Reputation: 624

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>
                            ))}

Upvotes: 2

Noman
Noman

Reputation: 699

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>
                            ))

Upvotes: 0

Related Questions