I currently have a default list of options for the user. However, I want to allow users to add their own category dynamically. This will trigger a dialog box to appear. How can I modify my code so that the value property starts from number 4? Take a look at what I've implemented below:
class Registration extends React.PureComponent {
constructor() {
super();
this.state = {
open: false,
type: '',
platform: [],
};
}
handleOpen = (type) => this.setState({ open:true, type });
handleClose = () => this.setState({ open:false });
addPlatform = (event) => this.setState({ platform: event.target.value});
render() {
const { type, platform} = this.state;
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary
onTouchTap={this.handleClose}
/>,
];
return (
<div className="registration">
<Card>
<Dialog
title={`Add ${type}`}
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
{type === 'category' ?
<TextField
type="text"
hintText="Category Name"
onChange={this.addCategory}
/> :
<TextField
type="text"
hintText="Platform Name"
onChange={this.addPlatform}
/>
}
</Dialog>
<SelectField
value={this.state.valueOfCategory}
onChange={this.handleCategoryChange}
hintText="Category"
>
<MenuItem value={1} primaryText="Food" />
<MenuItem value={2} primaryText="Travel" />
<MenuItem value={3} primaryText="Communication" />
</SelectField>
<FloatingActionButton onTouchTap={() => this.handleOpen('category')}><ContentAdd /></FloatingActionButton>
<RaisedButton label="Done" onClick={this.onSubmit} />
</Card>
</div>
);
}
}
export default Registration;