why react-select default value doesn't show

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;