I want to create form in which I can add and delete fields and edit values from state of react js. I am using react-bootstrap.
1 Answer
Try using reactjs-form-builder this is stateful form builder which means you can manage form using state like in example below. check out this link https://www.npmjs.com/package/reactjs-form-builder
import React, { Component } from 'react'
import FormBuilder from 'reactjs-form-builder'
class Example extends Component {
constructor(props) {
super(props);
this.setState({
form:{
"fields":{
"name":{
'label': "Product Name",
"type": "text",
"placeholder": true,
"required": true,
"requireMessage": "This Field is Required" // To customize message if field is empty
},
"description":{
'label': "Product Name",
"type": "textarea",
"required": true,
},
"categories": {
'label': "Categories",
"type": "select",
'options': [
{'label':"Apple", 'value':1},
{'label':"Banana", 'value':2}
],
"placeholder": true,
"required": true,
"requireMessage": "This Field is Required"
},
'submit': {
"type": "submit",
"label": "Create Product",
'color:': 'btn-primary',
}
}
}
});
}
onChange(data){
this.setState({
form: data
});
}
onSubmit(data){
this.setState({
form: data
});
var name = this.state.form.name.value;
var description = this.state.form.description.value;
var category = this.state.form.category.value;
}
render() {
return <FormBuilder
fields={this.state.form}
onChange={this.onChange.bind(this)}
onSubmit={this.onSubmit.bind(this)}
/>
}
}
1 Comment
Arashdeep Singh
Right now only text, text area field and react-select fields supported