Setting a state in react.js with two-way binding - reactjs

Question

i'am working in a project using react.js and fire-base, i have a form when i set the input with my state that is fill with data of fire-base, and is working i can update and create new registry, but i think that my onChangeHandle() for the inputs is not the correct way to do it.
This is my form:
render(){
return (
<div className="row">
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div className="form-group">
<label >Nombre de Proyecto</label>
<input type='text' value={this.state.proyectName} onChange={(event)=>this.onChangeHandle('p',event)}className="form-control" id="project_name"/>
</div>
<div className="form-group">
<label >Inspiracion</label>
<textarea value={this.state.inspiration} onChange={(event)=>this.onChangeHandle('i',event)} rows="4" cols="50" className="form-control" id="inspiration"/>
</div>
<div className="form-group">
<label >Que problema resuelve</label>
<textarea value={this.state.whatDoes} onChange={(event)=>this.onChangeHandle('w',event)} rows="4" cols="50" className="form-control" id="what_does"/>
</div>
<div className="form-group">
<label >Como esta hecho</label>
<textarea value={this.state.howBuild} onChange={(event)=>this.onChangeHandle('h',event)} rows="4" cols="50" className="form-control" id="how_build"/>
</div>
<div className="form-group">
<label >Integrantes</label>
<input type='text' className="form-control" id="team"/>
</div>
<div className="form-group">
<button className="form-control btn btn-primary" onClick={()=>this.writeStartupData()} >Agregar </button>
</div>
</div>
</div>
)
}
And here is my event handler:
onChangeHandle(exp,event){
switch(exp){
case "p":
this.setState({
proyectName: event.target.value,
});
break;
case "i":
this.setState({
inspiration: event.target.value,
});
break;
case "w":
this.setState({
whatDoes: event.target.value,
});
break;
case "h":
this.setState({
howBuild: event.target.value,
});
break;
case "t":
this.setState({
team: event.target.value,
});
break;
}
}

Answer 1

I think you should do something like this.
<div className="form-group">
<label >something</label>
<input
type='text'
value={this.state.something}
onChange={event => this.setState({something: event.target.value})}
className="form-control" id="project_name"/>
</div>

Answer 2

The code for your event handlers is not something I'd consider very readable, DRY, or adherent to any react best practises.
Using an anonymous arrow function and calling setState from there, like #vitaliy-andrianov has done, is perfectly fine. There is just one downside with arrow functions in that case: the functions are re-created on every re-render, incurring a small (most likely negligible) performance penalty. It could also be a little more dry. Below is another acceptable alternative:
// Component class method
handleFormChange(event) {
this.setState({
[event.currentTarget.name]: event.currentTarget.value
});
}
// ... and if you like destructuring
handleFormChange({currentTarget: {name, value}}) {
this.setState({ [name]: value });
}
// An example input
<input
className="form-control"
name="proyectName"
type="text"
value={this.state.proyectName}
onChange={this.handleFormChange} />
Note: I am passing handleFormChange directly to the onChange prop; for this to work, the function has to be bound to the scope of the class. So make sure you do that in the constructor (this.handleFormChange.bind(this)), or just use an arrow function.