reactjs - Initial value set for material ui drop-down passed as prop not being set

Question

I am attempting to create a form which displays units of measurement in a drop-down menu. However, I am trying to set the initial value to a value retrieved from the database, this passed as a prop from another file.

This is a snippet of the Form:

<FormControl>
                <InputLabel>Weight</InputLabel>
                    {checkWeightValueFunction()} 
                    <Select className="weightSelect" name="weight" value={weightValue || ""} onChange={handleWeightChange} >
                                    <MenuItem value={10} >kg</MenuItem>
                                    <MenuItem value={20} >lbs</MenuItem>
                    </Select>
                 </FormControl> 

As can be seen above, I am creating a function called checkWeightValueFunction(). This uses the weight value passed with the prop and sets the weight value accordingly:

   const [weightValue, setWeightValue] = useState("");
         const weightPassed = props.userUnits.weight;
         const checkWeightValueFunction = () => {
             if(checkWeightExecuted==false)
                {
                    switch( props.userUnits.weight)
                    {
                        case "kg": setWeightValue(10); if(weightValue!="") {checkWeightExecuted=true;}   break;
                        case "lbs": setWeightValue(20); if(weightValue!="") {checkWeightExecuted=true;}  break;
                    }
                } 
        }

Currently, my code does not set the default value of the weight. However, if I click on another drop-down list within the same form (did not show this part as it is not related to the issue), the weight is set to the desired value, hence the code works after a change in state is noted.

question from:https://stackoverflow.com/questions/65906488/initial-value-set-for-material-ui-drop-down-passed-as-prop-not-being-set

Answer 1

The issues was related to the userUnits not being set correctly. This is a prop that is being passed from another file.

Previously, userUnits were set using the following code:

var copyOfUnits = unitsFromGet.slice(0);
    userUnits.weight=copyOfUnits.pop()

The proper implementation of the useState is to make use of a setUserUnits which may be used as follows:

setUserUnits(
    {
       weight: copyOfUnits.pop()
     }
   );