How can get Value from child component in react?

Question

I create a InputComponent and I want to import this component in other component and do submit, but I can't do it. how can I get value from child component in my FormComponent

InputComponent.js

import React, {Component} from 'react';

class InputComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { currentVal: null }
    }

    render() { 
        return ( 
            <div>
                <input  
                    value={this.state.currentVal}
                    onChange={(event) => this.setState({currentVal:event.target.value })}
                   /> 
            </div>
         );
    }
}

export default InputComponent;

FormComponent.js

import React,{Component} from 'react';
import InputComponent from '../../components/common/InputComponent';

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


    CallSubmit= (event) => {  
        // how can get username and password ?

        event.preventDefault();
        console.log(event.target.vale)

    }

    render() { 
        return ( 

            <div style={{width:100, height:500, marginTop:100}}>
                <form onSubmit={  this.CallSubmit }>
                    <InputComponent name="username" />
                    <InputComponent name="password" />

                    <button>Send it</button>
                </form>
            </div>
         );
    }
}

export default FormComponent;

Tony Bui · Accepted Answer · 2018-12-12 11:59:48Z

4

You can create an onChange action on child component, for example here is your FormComponent: Create this function to handle change:

onChangeUsername(username){
 this.setState({username})
 }

Passing the props to child component:

<InputComponent name="username" onChange = {this.onChangeUsername} />

And in the child component(InputComponent), you can access this props and pass the data to it:

this.props.onChange(event.target.value)

answered Dec 12, 2018 at 11:59

Tony Bui

1,3079 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek · Accepted Answer · 2018-12-12 11:40:40Z

1

move your onChange functions in parent component and store username and password in FormComponent component

answered Dec 12, 2018 at 11:40

Abhishek

1,7242 gold badges16 silver badges27 bronze badges

1 Comment

Aras Over a year ago

i don't understand, can you explain it to me?

Otavio Augusto · Accepted Answer · 2018-12-12 11:58:24Z

1

In React, data flows one way, from parent to children.

Therefore, you need to have the input' actual states at the FormComponent and pass them as props to the InputComponent, and the function that deals with it at the FormComponent either.

<div>
  <InputComponent 
    input={this.state.username} 
    onChange={this.handleInputChange}
  />
  <InputComponent 
    input={this.state.password} 
    onChange={this.handleInputChange}
  />
</div>

A good article to understand it: https://openclassrooms.com/en/courses/4286486-build-web-apps-with-reactjs/4286721-understand-one-way-data-bindings

answered Dec 12, 2018 at 11:58

Otavio Augusto

3371 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can get Value from child component in react?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related