React Dropbox Component using Material-UI-Next - reactjs

Question

Is there a way to nest a dropdown component with MenuItem? I would like to declare one component whenever I need to use a drop down instead of nesting two.
Am I on the right path or should drop down components be handled differently than normal React components?
App.js (this currently works nesting MenuItem within DropDown)
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
>
{stateAbbreviationData.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</DropDown>;
App.js (how I would like to use my component, does not work)
Shows code (data.map(option => ( ))} ) instead of a list when clicked. Further code below.
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
menuData="stateAbbreviationData"
menuKey={stateAbbreviationData.value}
menuValue={stateAbbreviationData.value}
menuOptionLabel={stateAbbreviationData.label}
/>;
DropDown.js
import React from "react";
import TextField from "material-ui/TextField";
import DropDownMenu from "./DropDownMenu";
const styles = {
minWidth: 175
};
class DropDown extends React.Component {
render() {
return (
<TextField
select
label={this.props.label}
value={this.props.value}
style={styles}
onChange={this.props.onChange}
margin="normal"
InputLabelProps={{
shrink: true
}}
menuData={this.props.menuData}
>
<DropDownMenu
key={this.props.menuKey}
value={this.props.menuValue}
optionLabel={this.props.menuOptionLabel}
/>
</TextField>
);
}
}
export default DropDown;
DropDownMenu.js
import React from "react";
import MenuItem from "material-ui/Menu/MenuItem";
const styles = {
minWidth: 175
};
class DropDownMenu extends React.Component {
render() {
return (
<div>
{this.props.menuData.map(option => (
<MenuItem key={this.props.key} value={this.props.value}>
{this.props.optionLabel}
</MenuItem>
))}
</div>
);
}
}
export default DropDownMenu;
StateAbbreviationData.js
const stateAbbreviationData = [
{
value: "AL",
label: "AL"
},
{
value: "AK",
label: "AK"
}
// ...
];
export default stateAbbreviationData;

Answer 1

I think your first example is the one that you want to create with your DropDown component. Try removing DropDownMenu component, and doing all of the logic inside DropDown:
import React from "react";
import TextField from "material-ui/TextField";
import MenuItem from "material-ui/Menu/MenuItem";
const styles = {
minWidth: 175
};
class DropDown extends React.Component {
render() {
return (
<TextField
select
label={this.props.label}
value={this.props.value}
style={styles}
onChange={this.props.onChange}
margin="normal"
InputLabelProps={{
shrink: true
}}
>
{this.props.menuData.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
);
}
}
export default DropDown;
And then you can use it the way you want to:
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
menuData={stateAbbreviationData} // <-- Put in braces
/>
Note:
With Material UI, I've used MenuItem components inside of the Select component, rather than the TextField component like you're doing:
https://material-ui.com/demos/selects/
There were a couple issues with your existing code I'll point out.
As I indicated above, you need to pass the data stateAbbreviationData into the DropDown component's props using curly braces:
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
menuData={stateAbbreviationData} // <-- This change
menuKey={stateAbbreviationData.value}
menuValue={stateAbbreviationData.value}
menuOptionLabel={stateAbbreviationData.label}
/>
There's another bug with the way you're setting the menuKey, menuValue, and manuOptionLabel props. With the code you included, it seems like stateAbbreviationData is an array of objects.
In the props, you're trying to access properties on that array that don't exist: stateAbbreviationData.value and stateAbbreviationData.label. The objects in the array have those bits, but the array itself doesn't.
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
menuData={stateAbbreviationData}
menuKey={stateAbbreviationData.value} // <-- Doesn't exist
menuValue={stateAbbreviationData.value} // <-- Doesn't exist
menuOptionLabel={stateAbbreviationData.label} // <-- Doesn't exist
/>
There's also a bug where you're passing menuData to the TextField component, but instead you should pass it to DropDownMenu.
That said, I recommend going with the first solution I proposed. Good luck!