how to set first value of array as default in cascading dropdown in react hooks

Question

I am using material UI to list dropdown value I have a hub,Country and account dropdown fields i want to set the first value of the array object to select initial value selected.

data file:

export const dataHub = [
    { name: 'Western Europe', hubId: 1 },
    { name: 'IMMEA', hubId: 2 },
]

export const dataCountry = [
    { name: 'France', countryId: 1, hubId: 1 },
    { name: 'Germany', countryId: 2, hubId: 1 },
    { name: 'Italy', countryId: 3, hubId: 1 },
    { name: 'Spain', countryId: 4, hubId: 1 },
    { name: 'Sweden', countryId: 5, hubId: 1 },
    { name: 'Switzerland', countryId: 6, hubId: 2 },
    { name: 'Uk', countryId: 7, hubId: 1 },
]

export const dataAccount = [
    {name:'Telco-channel',panterName:'',accountId:1,countryId:1},
    {name:'Consumer-Online',panterName:'',accountId:2,countryId:2},
    {name:'Education-Retail',panterName:'',accountId:3,countryId:2},
    {name:'Non-Trade',panterName:'',accountId:4,countryId:2},
    {name:'Telco-channel',panterName:'',accountId:5,countryId:3},
    {name:'Commercial-channel',panterName:'',accountId:6,countryId:4},
    {name:'Consumer-Retail',panterName:'',accountId:7,countryId:5},
    {name:'Commercial-Online',panterName:'',accountId:8,countryId:6},
    {name:'Non-Trade',panterName:'',accountId:9,countryId:6},
    {name:'Education-Online',panterName:'',accountId:10,countryId:1},
    {name:'Consumer-Retail',panterName:'',accountId:11,countryId:2},
    {name:'Telco-channel',panterName:'',accountId:12,countryId:2},
    {name:'Commercial-channel',panterName:'',accountId:13,countryId:3},
    {name:'Consumer-Online',panterName:'',accountId:14,countryId:3},
    {name:'Consumer-Online',panterName:'',accountId:15,countryId:4},
    {name:'Consumer-Retail',panterName:'',accountId:16,countryId:4},
    {name:'Non-Trade',panterName:'',accountId:17,countryId:4},
    {name:'Telco-channel',panterName:'',accountId:18,countryId:4},
    {name:'Consumer-Online',panterName:'',accountId:19,countryId:5},
    {name:'Commercial-Retail',panterName:'',accountId:20,countryId:7},
    {name:'Consumer-Online',panterName:'',accountId:21,countryId:7},
    {name:'Education-Online',panterName:'',accountId:22,countryId:7},
    {name:'Education-Retial',panterName:'',accountId:23,countryId:7},
    {name:'Non-Trade',panterName:'',accountId:24,countryId:7},
]

below is the component rendering dropdown fields

import React, { useState, useEffect } from 'react'
import { dataHub, dataCountry, dataAccount } from "../../constants/defaultValues";
import SelectMenu from '../../components/SelectMenu';


const defaultItemHub = { name: 'Select Hub ...' };
const defaultItemCountry = { name: 'Select Country ...' };
const defaultItemAccount = { name: 'Select Account ...' };

const Filters = () => {
    const [hub, setHub] = useState('')
    const [country, setCountry] = useState('')
    const [account, setAccount] = useState('')
    const [countries, setCountries] = useState(dataCountry)
    const [accounts, setAcconts] = useState(dataAccount)


    useEffect(() => {
const defaultHub = sort(dataHub)[0]
        
        const defaultCountry = sort(dataCountry).filter(country => country.hubId === defaultHub.hubId)[0];
        
        let defaultAccount = sort(dataAccount).filter(account => account.countryId === defaultCountry.countryId)[0];
        setHub(defaultHub)
        setCountry(defaultCountry)
        setAccount(defaultAccount)
    }, [])

    const hubChange = (event) => {
        const hub = event.target.value;
        const countries = dataCountry.filter(country => country.hubId === hub.hubId);
        setHub(hub)
        setCountries(countries)
        setCountry('')
        setAccount('')
    }

    const countryChange = (event) => {
        const country = event.target.value;
        const accounts = dataAccount.filter(account => account.countryId === country.countryId);
        setCountry(country)
        setAcconts(accounts)
        setAccount('')
    }

    const accountChange = (event) => {
        setAccount(event.target.value);
    }

    const hasHub = hub && hub !== defaultItemHub;
    const hasCountry = country && country !== defaultItemCountry;
    //console.log("defaultHub",defaultHub)
    return (
        <div className="container">
            <div className="d-flex mr-1 justify-content-center align-items-center">
                <SelectMenu field={"Hub"} value={hub} options={dataHub} fieldtype={"dropdown"} onChange={hubChange} />
                <SelectMenu field={"Country"} value={country} disabled={!hasHub} options={countries} fieldtype={"dropdown"} onChange={countryChange} />
                <SelectMenu field={"Account"} value={account} disabled={!hasCountry} options={accounts} fieldtype={"dropdown"} onChange={accountChange} />
            </div>
        </div>
    )
}
export default Filters

the selectMenu component, I am passing props required props for the component below

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(2),
        minWidth: 180,
    },
    selectEmpty: {
        marginTop: theme.spacing(2),
    },
}));

export default function SelectMenu({ field, options, value, disabled, fieldtype, onChange }) {
    const classes = useStyles();
    
    const handleChange = (event) => {
        onChange(event)
    };
    // When the field is a dropdown
    if (fieldtype === "dropdown") {
        return (
            <div>
                <FormControl variant="outlined" className={classes.formControl}>
                    <InputLabel id="demo-simple-select-outlined-label">{field}</InputLabel>
                    <Select
                        labelId="demo-simple-select-outlined-label"
                        id="demo-simple-select-outlined"
                        value={value || ''}
                        onChange={handleChange}
                        label={field}
                        disabled={disabled}
                    >
                        {
                            options.map((element, key) => {
                                return (
                                    <MenuItem key={key} value={element}>{element.name}</MenuItem>
                                )
                            })
                        }
                    </Select>
                </FormControl>
            </div>
        );
    }
    else {
        // When the field is a Integer and Prepopulated
        if (options != null) {
            return (
                <div>
                    <FormControl variant="outlined" className={classes.formControl}>
                        <TextField
                            id="outlined-read-only-input"
                            label={field}
                            value={options[0].value}
                            defaultValue="Hello World"
                            InputProps={{
                                readOnly: true,
                            }}
                            variant="outlined"
                        />
                    </FormControl>
                </div>
            )
        }
        //When the field is a Integer and a Input from the user
        else {
            return (
                <div>
                    <FormControl variant="outlined" className={classes.formControl}>
                        <TextField id="outlined-basic"
                            onChange={handleChange}
                            label={field} variant="outlined" />
                    </FormControl>
                </div>
            )
        }

    }
}

Can anyone help me what wrong i am doing,I am not able to set the default value in the dropdown.

enter image description here

Answer 1

Try using defaultValue instead of value in <Select> tag.

Answer 2

I feel there are couple of reasons which might be causing this issue.

1. Make sure that, default value should present in actual options. ie default country should be one among countries list then only default value gets picked by material UI component.
2. As per material UI docs , If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected. If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected. So you should define equality so that value property of Select will get matched with value property of MenuItem and then it gets picked as default value.