Objects are not valid as a React child error when giving value to react-select

user_17913461 0
Viewed 876
   **Uncaught Error: Objects are not valid as a React child (found: object with keys {label, value, __isNew__}). If you meant to render a collection of children, use an array instead.**

getting this error when giving value prop to the component

this is the tags array i am getting from api ["apple","orange","banana"]

this is my code

                 <CreatableSelect
                        isMulti
                        name="tags"
                        value={values?.tags?.map((tag, index) => ({
                          value: tag,
                          label: tag,
                        }))}
                        defaultValue={values?.tags?.map((tag, index) => ({
                          value: tag,
                          label: tag,
                        }))}
                        getOptionValue={(option) => option.value}
                        getOptionLabel={(option) => option.label}
                        onChange={(option) => {
                          setFieldValue("tags", option);
                        }}
                    />
react-select jsx reactjs
1 Answers

If you check the error it is telling Object is not valid child. And to use array instead. Currently you are just printing the whole object.

That's how you onChange method would look like:

onChange={(items) => {
  items.forEach((value) =>                                           
  setFieldValue("tags", ...value.value); 
  });
}}

You can change the code if some modifications are need as required. But that is the main idea that you have array so you will be showing multiple elements.

user_59962760
Related