why react-select default value doesn't show - reactjs

Question

I using react select like following code1. But In react-select doesnt show default value.
Two console.log are show me same value correctly all time .
(defaultArray is just a variable)
And when I use code2. Default value does not show too. When I use code3 . Default value showed.
That is too curious to me.
Please give me advice.
edit1 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
I found new one. useEffect may be caused it's part of problem.
when I remove [useEffect] and set Array. work well.
But Fundamental problem is invisible yet.
const [defaultArray, setDefaultArray] = useState([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
code1
import React from "react";
import { useState, useEffect } from "react";
const SelectPersonality: React.FC<RouteComponentProps> = props => {
const [defaultArray, setDefaultArray] = useState(Array());
useEffect (() => {
setDefaultArray([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]);
}, []);
return (
<div>
{console.log(defaultArray)}
{console.log([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
])}
<Select
isMulti
defaultValue={defaultArray}
options={character_options}
onChange={value => Change(value)}
className="select_personality_character"
/>
</div>
);
};
export default SelectPersonality;
code2
{console.log(defaultArray)}
{console.log([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
])}
<Select
isMulti
defaultValue={
defaultArray
? defaultArray
: [
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]
}
options={character_options}
onChange={value => Change(value)}
className="select_personality_character"
/>
code3
<Select
isMulti
defaultValue={
defaultArray
? [
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]
: defaultArray
}
options={character_options}
onChange={value => Change(value)}
className="select_personality_character"
/>

Answer 1

it seems that defaultArray is not equal to the array ( read the code bellow, is much easier to understand than to explain )
defaultArray != [
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]
defaultArray it may be an anidated array
[
[
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]
]
please check and let me know
edit:
the code2 and code3 gives us the hint that defaultArray:
is not null
is not undefined
it may be empty
like you said into the edit, it may be useEffect fault
basically you initialize the array, render the component, populate the array with the values
try this :
const [defaultArray, setDefaultArray] = useState([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]);
you should populate the array before rendering
also, keep this in mind
const dependenciesArray = []
useEffect(()=>{}, dependenciesArray) // this will block the rerender of the component at state update
useEffect(()=>{}) // not passing an array will force a rerender of the component at each state update
so if you want dinamic select values, don't pass the second argument into the useEffect()
see docs: useEffect docs

Answer 2

Try this,
import React from "react";
import "./styles.css";
import Select from "react-select";
export default function App() {
return (
<div className="App">
<h1>React-select example</h1>
<SelectComponent />
</div>
);
}
const SelectComponent = () => {
const options = [
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
{ value: "35", label: "F" },
{ value: "36", label: "G" },
{ value: "37", label: "H" },
{ value: "38", label: "I" }
];
const defaults = [options[0], options[1], options[2], options[3]];
return (
<div>
<Select
isMulti
defaultValue={defaults}
options={options}
/>
</div>
);
};
I think the problem is that your default values dont match the options values, you are feeding the select component 2 different data arrays and it gets confused

Answer 3

Hi I resolved this problem but I still don't understand what caused it.
I had to add {defaultArray !== undefined && (~)} . This code doesn't work without it.
I can't understand.
why....
import React from "react";
import { useState, useEffect } from "react";
const SelectPersonality: React.FC<RouteComponentProps> = props => {
const [defaultArray, setDefaultArray] = useState<Array<{ [key: string]: string }>>();
useEffect (() => {
setDefaultArray([
{ value: "30", label: "A" },
{ value: "31", label: "B" },
{ value: "32", label: "C" },
{ value: "33", label: "D" },
{ value: "34", label: "E" },
]);
}, []);
return (
<div>
　　　　 {defaultArray !== undefined && (
<Select
isMulti
defaultValue={defaultArray}
options={character_options}
onChange={value => change(value)}
className="select_personality_character"
/>
)}
</div>
);
};
export default SelectPersonality;