CODEWITHSUNDEEP
reactjs
Olufsen
Olufsen

Reputation: 160

Reactjs: How to pass user input from different files?

I have a login page and inputs the email and password I need the email reused on different pages like absent and news

How do I get the user inputted email from login and place it there?

Login.jsx function

   const { data } = this.state
        const tabletopModel = data['token']
        const newData = tabletopModel ? tabletopModel.all() : null
        console.log('log for newdata', newData)
        var c = 0;


        if (newData == null) {
            console.log('null')
        }
        else {

            for (var i = 0; i < newData.length; i++) {
                if (newData[i].アドレス == this.email.value && newData[i].Passkey == this.pass.value) {
                    c++;
                    //console.log('i', i);

                }

            }
            if (c > 0) {
                //success login
                document.getElementById("footerConfirmLogin").style.visibility = "visible";
                this.props.history.push({
                    pathname: '/Passkey',
                    email: this.email.value // your data array of objects
                })
            }
            else {
                document.getElementById("footerConfirmError").style.visibility = "visible";
            }
        }

and the email that's <input type="email" name="username" ref={(email) => this.email = email} className="form-control" id="userEmail"/> this is inside a form onSubmit={this.handleSubmit}

I need to specifically place the value of email here

Absent.jsx

   render() {

        return (


<form className="gform" method="POST" action="asd">

<input type="text"  value= *the email value* />

</form>


        );
    }

Upvotes: 1

Views: 344

Answers (2)

ravibagul91
ravibagul91

Reputation: 20755

As email is not a sensetive information, you can make use of localStorage.

In your Login component you can store your email in localStorage when your handleSubmit method executes.

To store email in localStorage do this.

localStorage.setItem("email",this.email.value);  //considering `this.email.value` gives you correct value

And you can use this value wherever you want,

render() {
  const email = localStorage.getItem("email");
  return (
    <form className="gform" method="POST" action="asd">
      <input type="text"  value={email} />
    </form>
  );
}

Upvotes: 1

Shmili Breuer
Shmili Breuer

Reputation: 4147

The ideal way to do this would be by using redux and react-redux to create a central store to share data trough the entire app and create action creators to be able o trigger actions from any component that effects the central store.

You could also pass the email as props up and down the components that need to access it, but this gets very cumbersome over time.

Upvotes: 1

Related Questions