Populating a Material-UI dropdown with Redux store data

I am trying to get my Redux store fields to automatically populate a method I have imported. Am I going about this the right way in order to get this done? Do I need to create a mapping options for each field?

I have each of my dropdowns inserted with a PopulateDropdown list and the fields in each of them but I need them split as per the id and text.

Am I accessing my redux store correctly below? I have the array declared on up my function component by using const fields = useSelector(state => state.fields);

Update I have the method inserted into where the dropdowns should be however I don't think I am accessing the data correctly which is causing the problem. The fields array has been de-structured into the six different fields for each dropdown and different mappingOptions have been created for each one.

What do I need to do to get the data into the method? the examples I have seen have static arrays declared on the component rather than use the Redux store.

const fields = useSelector(state => state.fields);  // can destructure individual fields  const { diveSchoolList, currentList, regionList, diveTypeList, visibilityList, diveSpotList } = fields;    /**  /* enter keys (which you want to render as title and value in dropdown list) as value in title and value  */  const mappingOptions = { title: "currentLevel", value: "currentID" };  const mappingOptions1 = { title: "diveRegion", value: "diveRegionID" };  const mappingOptions2 = { title: "diveType", value: "diveTypeID" };  const mappingOptions3 = { title: "visibility", value: "visibilityID" };  const mappingOptions4 = { title: "diveLocation", value: "diveSpotID" };  const mappingOptions5 = { title: "diveSchoolName", value: "diveSchoolID" };  

populateDropdown method that I have imported

export const PopulateDropdown = ({ dataList = [], mappingOptions, name, label }) => {    const { title, value } = mappingOptions;    return (  <FormControl style= >    <InputLabel id={label}>{label}</InputLabel>    <Select labelId={label} name={name} >     {dataList.map((item) => (    <MenuItem value={item[value]}>{item[title]}</MenuItem>    ))}    </Select>  </FormControl>  );  };  

imported dropdown menu

       <PopulateDropdown             dataList={diveType}             mappingOptions={mappingOptions}             name="fieldName"             label="Select dive type"             value={dive.typeID}             onChange={handleChange}/>  

Also how would I import my JSS styling file into method as I previously had a {classes.formControl} attached to a formControl element to handle this.

https://stackoverflow.com/questions/66726092/populating-a-material-ui-dropdown-with-redux-store-data March 21, 2021 at 04:18AM