Meteor - Get Value From Child To Parent

What I'm trying to achieve: Get data from a nested element. How I tried to achieve it: Use ref attribute of a child to get that element in the parent. Doesn't work because this.ref

Solution 1:

While you can use refs to give a parent access to data of a child component, you really shouldn't. (Netflix, a heavy user of react, even has a rule "no refs, ever" See this video, from about 10m in). In 99.9% of all cases, anything that you can use refs for, can be solved better in some other way. In your example, the parent should not need access to the child's data through refs:

• if the data is about child props, then the parent already knows about the data, and therefore: no refs needed.
• if the data is about child state, then using refs to access that data is really cheating react: state is not supposed to be directly accessible from outside the component.
• if the data is not in child props, nor in child state, then it probably is a design omission to be fixed, because data relevant to the app should be either props or state.

In your case, a better and ref-less solution would be:

• make your parent component stateful, by adding state for textInputValue and textAreaValue
• add a onChange() handler for textarea in your parent (since this component is directly rendered by the parent), which updates state
• pass this.state.textInputValue and a changeHandler={this.textInputChangeHandler} as props to your <TextInput> component
• in your <TextInput> component, add an onChange={this.props.changeHandler} to the input component, which calls the method on the parent to update state
• in the change handlers in your parent, you can read event.target.value to get the new value of the fields.

By doing this, you put the input values into state in the parent, and pass one of them as props to the child.

Bonus: in any code to submit your form, you do not need to read all fields again. You can simply get all info from this.state to send to wherever.