how can I set value in default react-select

Question

I need to set a value in default whatever value come mean based on previous selection this select dropdown value will come so what my task is I need to set that value in default selected because at I time one value come so if user select mary name in the previous drop down so for example in this drop-down checker1 come so I need to set checker1 to direct in default this label will change according username so need to set dynamic I added some example how vale and label come

this way value come

{value: "checker1", label: "checker1"}

const [userlevel, setUserlevel] = React.useState(null);

const levelfunction = () => {
    let levelList = [];
    for (let [key, value] of Object.entries(index)) {
      if (value === true) {
        levelList.push({ value: key, label: key });
      }
    }
    return levelList;
  };
  const handlechange = (object, action) => {
    let name = action.name;
    let value = object.value;
    setUserlevel({ value: value, label: value });
  };

              <Grid item xs={3} className={classes.formGrid}>
                    {index !== null && (
                      <Select
                        className="drop-down"
                        options={levelfunction()}
                        name="level"
                        value={userlevel}
                        onChange={handlechange}
                        placeholder="Role"
                        theme={(theme) => ({
                          ...theme,
                          colors: {
                            ...theme.colors,
                            text: "white",
                            primary25: "#d6fdf7",
                            primary: "#0bb7a7",
                            primary50: "#d6fdf7",
                          },
                        })}
                      ></Select>
                    )}
                  </Grid>

refer to code sandbox CodeSandbox link

Answer 1

You can set the default value after you calculate the levelList , and set option if it is not assigned , like below code

import "./styles.css";
import React, { useEffect ,useMemo } from "react";
import Select from "react-select";
import { Grid, Box, makeStyles, Typography } from "@material-ui/core";

const initialState = {
  screen: { value: "InitialScreening", label: "Initial Screening" },
  level: "",
  user: "",
};
const useStyles = makeStyles((theme) => ({
  formGrid: {
    padding: theme.spacing(2),
  },
  tableContainer: {
    maxHeight: 440,
  },
  btnColor: {
    backgroundColor: "#0bb7a7",
    color: "#fff",
  },
}));
const userData = [{"username":"Aaron_Stepp","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Daniel_Chancellor","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"dev_sams","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"dev_sams3","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":true},{"username":"dev_sams5","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"Donald_Smith","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Gerald_Middlebrooks","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"kff22450@eoopy.com","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Laurel_Guerrero","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"maker2","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"maker3","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":true},{"username":"Marlin_Gayle","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Mary_Aiello","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Mary_Hillin","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Megan_Collins","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"Michael_Cruz","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"Michael_Principe","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Oliver_Rokus","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Roland_Lenz","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"Ruth_Voves","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Tyler_Martindale","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"yejlhnqzcdeahwzcpi@upived.online","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false}]

export default function App() {
  const classes = useStyles();
  const [data, setData] = React.useState(userData);
  const [DashboardPageStatus, setDashboardPageStatus] = React.useState("");
  const [index, setIndex] = React.useState(null);
  const [userlevel, setUserlevel] = React.useState({});
  const [formData, setFormData] = React.useState(initialState);
  const { screen, level } = formData;
  const [value, setValue]= React.useState('')

   const handleSelectChangeL = (object, action,selected) => {
    setIndex(data[object.id]);
    setUserlevel(null);
    setValue(selected);
  };
  const options = useMemo(()=>{
    if(index){
      let levelList = [];
      for (let [key, value] of Object.entries(index)) {
        if (value === true) {
          levelList.push({ value: key, label: key });
        }
      }
      return levelList;
    }
   
  },[index])

  useEffect(()=>{
    if(index){
      setUserlevel(options[0])
    }
  },[options,index])

 
  const handlechange = (object, action) => {
    let name = action.name;
    let value = object.value;
    setUserlevel({ value: value, label: value });
  };


  return (
    <div className="App">
       <Grid item xs={12} sm={6} md={3} className={classes.formGrid}>
                    <Select
                      className="drop-down"
                      options={data?.map((data, index) => ({
                        value: data.username,
                        label: data.username,
                        id: index,
                      }))}
                      name="user"
                      value={value}
                      onChange={handleSelectChangeL}
                      placeholder="Analyst Name"
                      theme={(theme) => ({
                        ...theme,
                        colors: {
                          ...theme.colors,
                          text: "black",
                          primary25: "#d6fdf7",
                          primary: "#0bb7a7",
                          primary50: "#d6fdf7",
                        },
                      })}
                    ></Select>
                  </Grid>
                  <Grid item xs={12} sm={6} md={3} className={classes.formGrid}>
                    {index !== null && (
                      <Select
                        className="drop-down"
                        options={options}
                        name="level"
                        value={userlevel}
                        // defaultValue={{ label: userlevel, value: userlevel }}
                        onChange={handlechange}
                        placeholder="Role"
                        theme={(theme) => ({
                          ...theme,
                          colors: {
                            ...theme.colors,
                            text: "white",
                            primary25: "#d6fdf7",
                            primary: "#0bb7a7",
                            primary50: "#d6fdf7",
                          },
                        })}
                      ></Select>
                    )}
                  </Grid>
    </div>
  );
}

You can refer to code sandbox below for ref