Displaying Div with Child and Parent state values - reactjs

Question

So I am organizing my React project and I am creating a form, which I would like to give the user the ability to individually edit and post values for a particular item in the form, or alternatively check a box that will let them edit multiple fields at once, and hit a save button to load the whole form. So I know my parent component is going to need an "isEditingAll" type of state and my child components (each field) will have to display their own "isEditing" state for when it can save its value up as an individual post. Currently I have the following code in the render of my child:
render(){
return(
<span className="displayList">
{this.state.isEditing ? '' : <span className="clickMe" onClick={this.onClickEdit}>{this.state.displayText}</span>}
{this.state.isEditing ? <span><input name="inputValue" className="inputValue" value={this.state.displayText} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span> :''}
{this.state.isEditing ? <button className="saveMe" onClick={this.onSaveEdit}>Save</button> :''}
</span>
)
}
This allows me to view values when !isEditing and edit values when isEditing, and there is a save button. But when someone checks the box in a parent, I need it to override this value. Is the best option to add a prop value that is passed in from the parent state for isEditingAll prop that will connect my parent isEditingAll? Then I would be able to hide the save button when editing entire form. I just fear I am adding a lot of complexity to the child component. Let me know your thoughts and if I may be missing some possible options for this logic? Thanks in advance.

Answer 1

No problem, you can do it if you need.
Reactjs is a very flexible library that allows developer do lots of crazy things.
In this scenario, I was imagining you could do something like this.
MainForm.js
import React, { Component } from 'react';
import InputForm from './InputForm';
class MainForm extends Component {
constructor(props) {
super(props);
this.state = {
multipleChecked: false,
fields: [{name: 'name', value: 'Alfred'}, {name: 'lastName', value: 'Smith'}],
}
}
onMultipleClick(e) {
this.setState({multipleChecked: e.target.checked});
}
onSaveIndividualEdit(name, value) {
let fieldsChanged = this.state.fields;
fieldsChanged.forEach(field => {
if (name == field.name) {
field.value = value;
return true;
}
});
this.setState({fields: fieldsChanged});
}
render() {
return (
<div>
<input type="checkbox" onClick={this.onMultipleClick.bind(this)}>Multiple edit</input>
{this.state.fields.map(field =>
<InputForm editingMultiple={this.state.multipleChecked} name={field.name} value={field.value} onSaveIndividualEdit={this.onSaveIndividualEdit.bind(this)} />
)}
</div>
);
}
}
export default MainForm;
InputForm.js
import React, { Component, PropTypes } from 'react';
class InputForm extends Component {
constructor(props) {
super(props);
this.state = {
isEditing: false,
editingMultiple: false,
displayText: ''
}
}
componentWillReceiveProps(nextProps) {
if (nextProps !== undefined) {
if (nextProps['value'] !== undefined) {
this.setState({displayText: nextProps.value});
}
if (nextProps['isEditing'] !== undefined) {
this.setState({isEditing: nextProps.isEditing});
}
if (nextProps['editingMultiple'] !== undefined) {
this.setState({editingMultiple: nextProps.editingMultiple});
}
}
}
onTextChanged(e) {
this.setState({displayText: e.target.value});
}
onClickEdit() {
this.setState({isEditing: true});
}
onSaveEdit() {
this.props.onSaveEdit(this.props.name, this.state.displayText);
this.setState({isEditing: false});
}
render() {
return (
<div>
<span className="displayList">
{this.state.isEditing ? '' : <span className="clickMe" onClick={() => this.onClickEdit()}>{this.state.displayText}</span>}
{this.state.isEditing ? <span><input type="text" onChange={this.onTextChanged.bind(this)} value={this.state.displayText}/></span> :''}
{this.state.isEditing && !this.state.editingMultiple ? <button type="button" onClick={() => this.onSaveEdit()}>Save</button> :''}
</span>
</div>
);
}
}
InputForm.propTypes = {
name: PropTypes.string,
value: PropTypes.string,
editingMultiple: PropTypes.bool,
onSaveEdit: PropTypes.func
};
export default InputForm;
I hope it can help you to make you go ahead!
Regards,
Renan