I am working with material ui, and I am getting the next issue: index.js:1 Material-UI: the Select component doesn't accept a Fragment as a child. Consider providing an array instead.
My code is the next:
import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';
import Store from '../component/store/store'
class StoreBuilder extends Component {
constructor(props) {
super(props);
this.state = {
DivisionState: 'Store 1',
DivisionData: [
{
id: 1,
divDeptShrtDesc: 'Store 1'
},
{
id: 2,
divDeptShrtDesc: 'Store 2'
},
{
id: 3,
divDeptShrtDesc: 'Store 3'
}
]
}
this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
}
handleChangeDivision(event) {
this.setState({ DivisionState: event.target.value });
}
renderDivisionOptions() {
return this.state.DivisionData.map((dt, i) => {
return (
<MenuItem
key={i}
value={dt.divDeptShrtDesc}>
{dt.divDeptShrtDesc}
</MenuItem>
);
});
}
render() {
return (
<div>
<Container >
<Grid >
<Store stores={this.state.DivisionState}
onChange={this.handleChangeDivision}
render ={this.renderDivisionOptions}>
</Store>
</Grid>
</Container>
</div>
);
}
}
export default StoreBuilder;
The code of the hook is the next:
import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';
const store = (props) => {
return (
<div>
<Container >
<Grid >
<Select value={props.DivisionState}
onChange={props.handleChangeDivision}
>
<>{props.render()}</>
</Select>
</Grid>
</Container>
</div>
);
}
export default store;
Any ideas? It is the correct way to use the select from material ui? Thanks.
In your <Select>
you are using <></>
, which is actually a fragment (and returns an object).
Try {props.render()}
without the use of the fragment.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With