Question

50

React - Can A Child Component Send Value Back To Parent Form

rated 0 times [ 51] [ 1] / answers: 1 / hits: 93806 / 8 Years ago, thu, january 12, 2017, 12:00:00

The InputField & Button are custom components that go into a form to create a form. My issue is how do I send the data back up to form so that on button click, I can fire ajax on the form with data (username & password):

export default auth.authApi(

  class SignUpViaEmail extends Component{



    constructor(props){

      super(props);

      this.state = {

        email : ,

        password : 

      };

      this.storeEmail = this.storeEmail.bind( this );

      this.storePassword = this.storePassword.bind( this );

    }



    storeEmail(e){

      this.setState({ email : e.target.value });

    }



    storePassword(e){

      this.setState({ password : e.target.value });

    }



    handleSignUp(){

      this.props.handleSignUp(this.state);

    }



    render(){

      return(

        <div className=pageContainer>



          <form action= method=post>

            <InputField labelClass = label

                        labelText = Username

                        inputId = signUp_username

                        inputType = email

                        inputPlaceholder = registered email

                        inputClass = input />

            <Button btnClass = btnClass

                    btnLabel = Submit

                    onClickEvent = { handleSignUp } />

          </form>

        </div>

      );

    }



  }

);

Or Is it not recommended & I should not create custom child components within the form?

child component => InputField

import React,

       { Component } from react;



export class InputField extends Component{



  constructor( props ){

    super( props );

    this.state = {

      value : 

    };

    this.onUserInput = this.onUserInput.bind( this );

  }



  onUserInput( e ){

    this.setState({ value : e.target.value });

    this.props.storeInParentState({[ this.props.inputType ] : e.target.value });

  }



  render(){

    return  <div className = >

              <label htmlFor = {this.props.inputId}

                     className = {this.props.labelClass}>

                {this.props.labelText}

              </label>

              <input id = {this.props.inputId}

                     type = {this.props.inputType}

                     onChange = {this.onUserInput} />

              <span className = {this.props.validationClass}>

                { this.props.validationNotice }

              </span>

            </div>;

  }

}

Error : I get the error e.target is undefined on the parent storeEmail func.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briannar

Add To Favorites

Follow

Total Points: 354

Total Questions: 103

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

briannar questions

1 Cookies.get() is undefined

Tue, Aug 31, 21, 00:00, 3 Years ago

1 How to center a button in Javascript

Sat, Jun 26, 21, 00:00, 3 Years ago

1 How is the nullish coalescing operator (??) different from the logical OR operator (||) in ECMAScript?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 3D Image rotation CSS

Sat, Jun 20, 20, 00:00, 4 Years ago

1 Three.js error --> THREE.Scene is not a constructor

Tue, Apr 7, 20, 00:00, 4 Years ago

View All

answered 8 Years ago terrances · Accepted Answer

React's one-way data-binding model means that child components cannot send back values to parent components unless explicitly allowed to do so. The React way of doing this is to pass down a callback to the child component (see Facebook's "Forms" guide).

class Parent extends Component {

  constructor() {

    this.state = {

      value: ''

    };

  }

  

  //...

  

  handleChangeValue = event => this.setState({value: event.target.value});

  

  //...

  

  render() {

    return (

      <Child

        value={this.state.value}

        onChangeValue={this.handleChangeValue}

      />

    );

  }

}



class Child extends Component {

  //...

  

  render() {

    return (

      <input

        type="text"

        value={this.props.value}

        onChange={this.props.onChangeValue}

      />

    );

  }

}

Take note that the parent component handles the state, while the child component only handles displaying. Facebook's "Lifting State Up" guide is a good resource for learning how to do this.

This way, all data lives within the parent component (in state), and child components are only given a way to update that data (callbacks passed down as props). Now your problem is resolved: your parent component has access to all the data it needs (since the data is stored in state), but your child components are in charge of binding the data to their own individual elements, such as <input> tags.

Addendum

In response to this comment:

What if we render a list of the child component? Using this single source of truth in Lifting state up technique will let the parent controls all the state of all the child inputs right? So how can we access each of the value input in the child component to (which is rendered as list) from the parent component?

For this case, you may map a child component for each element in the list. For example:

class Parent extends Component {

  //...

  handleChangeListValue = index => event => {

    this.setState({

      list: this.state.list

        .map((element, i) => i === index ? event.target.value : element)

    });

  }

  //...

  render() {

    return this.state.list.map((element, i) => (

      <Child

        value={element}

        onChangeValue={this.handleChangeListValue(i)}

      />

    ));

P.S. Disclaimer: above code examples are only for illustrative purposes of the concept in question (Lifting State Up), and reflect the state of React code at the time of answering. Other questions about the code such as immutable vs mutable array updates, static vs dynamically generated functions, stateful vs pure components, and class-based vs hooks-based stateful components are better off asked as a separate question altogether.