Display data into dropdown using JSON payload data

Question

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?

Krushnasinh Jadeja · Accepted Answer · 2021-11-15 13:08:02Z

2

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

answered Nov 15, 2021 at 13:08

Krushnasinh Jadeja

6241 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1285928 Over a year ago

Now I get Warning: value` prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.`

Krushnasinh Jadeja Over a year ago

@user1285928 try option.symbol || "" and in select tag props.selectedFuturesPair || ""

Noman · Accepted Answer · 2021-11-15 13:07:55Z

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

answered Nov 15, 2021 at 13:07

Noman

7098 silver badges20 bronze badges

2 Comments

Krushnasinh Jadeja Over a year ago

Every time a component's key changes React will create a new component instance rather than update the current one, so for performance's sake using uuidv4() will be sub-optimal to say the least. ref: reactjs.org/blog/2018/06/07/…

user1285928 Over a year ago

Now I get Warning: value` prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.`

Collectives™ on Stack Overflow

Display data into dropdown using JSON payload data

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related