Using Redux store data to populate dropdown fields in React - reactjs

Question

I am trying to populate dropdown fields in a form component using Redux data that I have in my store.
The below method is for each of my dropdowns which isn't populating as I don't think I am accessing the data correctly. I am trying to get it to iterate it out for the individual values in each of my field objects. Am I going down the correct with this?
const populateDropdown (option){
this.props.fields.{option}.length > 0 &&
this.props.fields.diveType.map(({diveType}) => {
return (
<MenuItem value={diveType.diveTypeID}>{diveType.diveType}</MenuItem>
)};
}
I have another method with useEffects and object.keys that I don't know would do the same thing.
useEffect(() => {
// dispatch the action to load fields for each field type
// once loaded, the changes will be reflected in the fields variable from the useSelector
Object.keys(fields).forEach(name => dispatch(requireFieldData(name)));
}, []); // <-- empty array

Answer 1

I have faced the same problem while developing the select input using material-UI. for the solution, I created one separate reusable component for generating select input.
PopulateDropdown.js
import React from "react";
import FormControl from "#material-ui/core/FormControl";
import Select from "#material-ui/core/Select";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
/**
* props.dataList: your redux array of object. set default value is empty array
* props.mappingOprions: its content title and value for render the MenuItem title and value
* props.name: form fielname
* props.label: input label
*/
const populateDropdown = ({ dataList = [], mappingOptions, name, label }) => {
const { title, value } = mappingOptions;
return (
<FormControl style={{ width: 200 }}>
<InputLabel id={label}>{label}</InputLabel>
<Select labelId={label} name={name}>
{dataList.map((item) => (
<MenuItem value={item[value]}>{item[title]}</MenuItem>
))}
</Select>
</FormControl>
);
};
export default populateDropdown;
How to use this component
//Custome components
import PopulateDropdown from "./components/PopulateDropdown.js";
// consider this as redux state
const reduxStateData = [
{ diveTypeID: 1, diveType: "type 1" },
{ diveTypeID: 2, diveType: "type 2" },
{ diveTypeID: 3, diveType: "type 3" }
];
// mapping options
/**
* enter keys (which you wan to render as title and value in dropdown list) as value in title and value
*/
const mappingOptions = { title: "diveType", value: "diveTypeID" };
export default function App() {
return (
<div className="App">
<PopulateDropdown
dataList={reduxStateData}
mappingOptions={mappingOptions}
name="feildName"
label="Select div type"
/>
</div>
);
}
Additional
You can add defaultOption props for populating the dropdown default option like none or select option Menuitem
codesandbox link
https://codesandbox.io/s/gifted-bose-q3kb0?file=/src/App.js:0-744