How to get data from custom component? - admin-on-rest

Question

I have an edit action inside my model file. I am using default react-admin components, unfortunately I had to created my custom component and after the form is submitted no data from this custom component were provided.
I have tried to wrap the whole component inside <FormControl> , it does not do the trick for me.
My component:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Input from '#material-ui/core/Input';
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 Chip from '#material-ui/core/Chip';
import { fetchUtils } from 'react-admin';
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
maxWidth: 300,
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing.unit / 4,
},
noLabel: {
marginTop: theme.spacing.unit * 3,
},
});
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
function getStyles(name, that) {
return {
fontWeight:
that.state.name.indexOf(name) === -1
? that.props.theme.typography.fontWeightRegular
: that.props.theme.typography.fontWeightMedium,
};
}
var names = [];
class MultipleSelect extends React.Component {
state = {
name: [
]
};
getRoles() {
const url = 'URLTOENDPOINT'
var data = [];
fetchUtils.fetchJson(url, {
method: "GET",
})
.then(response => {
Object.keys(response.json.value).forEach(function (key) {
var object = response.json.value[key];
data.push({
name: object.Name,
value: object.Id
});
})
this.setState({name: data});
});
}
getAllOptions() {
const url = 'URLTOENDPOINT'
var data = [];
fetchUtils.fetchJson(url, {
method: "GET",
})
.then(response => {
Object.keys(response.json.value).forEach(function (key) {
var object = response.json.value[key];
data.push({
name: object.Name,
value: object.Id
});
})
names = data;
});
}
componentDidMount() {
this.getRoles();
this.getAllOptions();
this.forceUpdate();
}
handleChange = event => {
console.log("y",event);
this.setState({ name: event.target.value });
};
render() {
const { classes } = this.props;
return (
<div>
<FormControl>
<InputLabel htmlFor="UserRoles">Chip</InputLabel>
<Select
multiple
value={this.state.name}
onChange={this.handleChange}
input={<Input id="UserRoles" />}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(obj => (
<Chip key={obj.value} label={obj.name} className={classes.chip} />
))}
</div>
)}
MenuProps={MenuProps}
>
{names.map(obj => (
<MenuItem key={obj.value} value={obj.value} style={getStyles(obj.name, this)}>
{obj.name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
}
MultipleSelect.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(MultipleSelect);
EditAction:
export const UserEdit = props => (
<Edit {...props} title={<UserTitle/>} aside={<Aside />}>
<SimpleForm>
<DisabledInput source="Id" />
<TextInput source="Login" validate={required()} />
<TextInput source="Email" type="email" validate={required()} />
<ReferrenceSelectBox source="UserRoles" />
<NullableBooleanInput source="Active" />
<DateField source="CreatedDate" showTime
locales={process.env.REACT_APP_LOCALE}
disabled={true} />
</SimpleForm>
</Edit>
);
I need to show multiple select box with selected data from API, so i had wrote custom component, because default components did not help me, but it didnt change anything and also the data are not showing.