How to access a child's state in React

I have the following structure:

FormEditor - holds multiple instances of FieldEditor
FieldEditor - edits a field of the form and saving various values about it in its state

When a button is clicked within FormEditor, I want to be able to collect information about the fields from all FieldEditor components, information that's in their state, and have it all within FormEditor.

I considered storing the information about the fields outside of FieldEditor's state and put it in FormEditor's state instead. However, that would require FormEditor to listen to each of its FieldEditor components as they change and store their information in its state.

Can't I just access the children's state instead? Is it ideal?

If you already have an onChange handler for the individual FieldEditors I don't see why you couldn't just move the state up to the FormEditor component and just pass down a callback from there to the FieldEditors that will update the parent state. That seems like a more React-y way to do it, to me.

Something along the line of this perhaps:
const FieldEditor = ({ value, onChange, id }) => {
const handleChange = event => {
const text = event.target.value;
onChange(id, text);
};

return (



);
};

const FormEditor = props => {
const [values, setValues] = useState({});
const handleFieldChange = (fieldId, value) => {
setValues({ ...values, [fieldId]: value });
};

const fields = props.fields.map(field => (

));

return (

{fields}
{JSON.stringify(values, null, 2)}

);
};

// To add the ability to dynamically add/remove fields, keep the list in state
const App = () => {
const fields = ["field1", "field2", "anotherField"];

return ;
};


Original - pre-hooks version:



class FieldEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
const text = event.target.value;
this.props.onChange(this.props.id, text);
}

render() {
return (



);
}
}

class FormEditor extends React.Component {
constructor(props) {
super(props);
this.state = {};

this.handleFieldChange = this.handleFieldChange.bind(this);
}

handleFieldChange(fieldId, value) {
this.setState({ [fieldId]: value });
}

render() {
const fields = this.props.fields.map(field => (

));

return (

{fields}
{JSON.stringify(this.state)}

);
}
}

// Convert to a class component and add the ability to dynamically add/remove fields by having it in state
const App = () => {
const fields = ["field1", "field2", "anotherField"];

return ;
};

ReactDOM.render(, document.body);

Stack Overflow Q#27864951, score: 193