Get value of other Component React.js

Question

I have this code in my Login.js :

<div className="row justify-content-start">
                <form className="form-signin">
                    <PageDetailsHeading name="Please Log-In to continue"/>
                    <EmailField/>
                    <PasswordField/>
                    <ButtonActor name="Log In" isPrimaryButton="true"/>
                </form>
            </div>

How can I get value of EmailField when I press ButtonActor ?

Here is my EmailField.js:

<div className="form-label-group">
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autoFocus onKeyDown={this._handleKeyDown}/>
                <label htmlFor="inputEmail">Email address</label>
            </div>

lift your state up in parent component, in your case in Login.js — Prithwee Das
– Prithwee Das, Commented Jul 29, 2019 at 5:08

ravibagul91 · Accepted Answer · 2019-07-29 05:05:48Z

1

You need to maintain state in Login component only,

state={email:''}

You also need to have a onChange handler and onClick in Login component only and pass them to EmailField and ButtonActor respectively,

onEmailChange = (e) =>{
  this.setState({[e.target.name]:e.target.value})
}

And

onButtonClick = () =>{
   console.log(this.state.email)
}

Pass the function to component,

<EmailField onEmailChange={this.onEmailChange}/>
<ButtonActor name="Log In" isPrimaryButton="true" onButtonClick={this.onButtonClick}/>

EmailField component,

<div className="form-label-group">
   <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autoFocus onChange={this.props.onEmailChange} name="email"/> //notice attribute `name`
   <label htmlFor="inputEmail">Email address</label>
</div>

ButtonActor component,

<button onClick={this.props.onButtonClick}>Log In</button>

answered Jul 29, 2019 at 5:05

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

3 Comments

Maifee Ul Asad Over a year ago

Btw, is there anyway to retrieve parent component's value ??

ravibagul91 Over a year ago

Which value you are talking about?

Maifee Ul Asad Over a year ago

Sorry... I was thinking too much complex, when it can be solved easily ...

Abhinav · Accepted Answer · 2019-07-29 05:08:20Z

0

You can provide that through mentioning that in the state of the component.

answered Jul 29, 2019 at 5:08

Abhinav

442 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get value of other Component React.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related