data is logging in console for a fraction of second and then disappear

Question

I am using react to build a signin and register form. In a signin component when I try to post some data using fetch to my database then I should receive a response from the server. So I try to console that promise(response). But the problem is, promise can be seen for a fraction of second in the console but suddenly it disappears. Actually, I am new to react so am not getting why is this happening...

The surprising thing is I am using fetch in the same way in the register component also but there everything is fine. And my server is also working fine as I have checked it using POSTMAN.

here is my code of signin component

import React from 'react';

class Signin extends React.Component{
 
  constructor(props){
    super(props);
    this.state={
      signInEmail:'',
      signInPassword:''
    }
  }

  onEmailChange=(event)=>{
    this.setState({signInEmail:event.target.value})
  }

  onPasswordChange=(event)=>{
    this.setState({signInPassword:event.target.value})

  }


  onSubmitSignIn=()=>{
   const prom= fetch('http://localhost:3001/signin',{
      method:'post',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        email:this.state.signInEmail,
        password:this.state.signInPassword
      })
    })

    console.log(prom);
}

  render(){
    const {onRouteChange}=this.props;
    return (
      <div>
        <article className="br3 ba dark-grey  mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
          <main className="pa4 black-80">
            <form className="measure">
              <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
                <legend className="f1 fw6 ph0 mh0">Sign In</legend>
                <div className="mt3">
                  <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
                  <input onChange={this.onEmailChange} 
                  className="pa2 input-reset bg-transparent hover-bg-black hover-white w-100"
                   type="email"
                    name="email-address" 
                    id="email-address" 
                    />
                </div>
                <div className="mv3">
                  <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
                  <input onChange={this.onPasswordChange} 
                   className="b pa2 input-reset bg-transparent hover-bg-black hover-white w-100"
                    type="password"
                     name="password"
                      id="password" 
                      />
                </div>
              </fieldset>
              <div className="">
                <input onClick={this.onSubmitSignIn}  
                className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
                 type="submit"
                  value="Sign in"
                 />
              </div>
              <div className="lh-copy mt3">
                <p onClick={() => onRouteChange('Register')} className="f6 link dim black db pointer">Register</p>
              </div>
            </form>
          </main>
        </article>
      </div>
    );

  }
 
}

export default Signin;

i don think you should be loggin the promise you need the result of that promise — EugenSunic, Nov 01 '20 at 18:10
If you are using Chrome, you can 'Preserve log' in the console as a setting. Additionally, since you are submitting a form, you can call `event.preventDefault()` to keep the form from submitting. There are more details on form submission here https://stackoverflow.com/questions/39809943/react-preventing-form-submission — gtzilla, Nov 01 '20 at 18:18

score 1 · Accepted Answer · answered Dec 31 '20 at 16:48

1

I got a problem with my code. Whenever I try to call onSubmitSignIn() function by clicking the button, the page gets automatically refreshed as the button is inside the html form element. That's why text inside the console get disappeared immediately.

answered Dec 31 '20 at 16:48

Aditya Singh Pundir

21
3

Yo Pro!!! It helped when I moved the button outside the form. Worked like Charm :) – Lalarukh khan Apr 05 '23 at 18:42

score 0 · Answer 2 · answered Nov 01 '20 at 18:13

Since you've said that it works in POSTAN the following should work in JS.

The fetch will return another promise hence you need to await it again and return the json of the POST response.

onSubmitSignIn=async ()=>{
   const promJson= await fetch('http://localhost:3001/signin',{
      method:'post',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        email:this.state.signInEmail,
        password:this.state.signInPassword
      })
    })
    const result = await promJson.json();
    console.log(result)
}

i have tried this, but the problem remains the same. – Aditya Singh Pundir Nov 09 '20 at 06:18 — Aditya Singh Pundir, Nov 09 '20 at 06:18

score 0 · Answer 3 · edited Nov 01 '20 at 18:23

0

Since fetch is asynchronous, try using await or then() to handle the response. You can change your code as follows:

const prom= await fetch('http://localhost:3001/signin',{
      method:'post',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        email:this.state.signInEmail,
        password:this.state.signInPassword
      })
    })

edited Nov 01 '20 at 18:23

Dharman

30,962
25
85
135

answered Nov 01 '20 at 18:17

Simran

98
6

data is logging in console for a fraction of second and then disappear

3 Answers3