Not able to type in Input field in React.js. Why?

Question

Here I can not able to type in Input field. Why?

class Profile extends Component {
  static contextType = FirebaseContext;

  constructor(props) {
    super(props);

    this.state = {
      user:{}
    }

    this.updateProfile = this.updateProfile.bind(this);
  }

  componentDidMount()
  {
        console.log("Profile")

        this.context.auth.onAuthStateChanged((user) => {

          if(user)
          {
            this.setState({user})
          } else
          {
            this.setState({user: null})
          }

        })
  }

  updateProfile(event) {
    event.preventDefault();

    var userData = this.context.auth.currentUser;

    userData.updateProfile({
      displayName: this.state.user.displayName
    }).then(function() {
      console.log("Profile Updated");
    }).catch(function(error) {
      console.log("Error Profile Updated");
    });

    userData.updateEmail(this.state.user.email).then(function() {
      console.log("Email Updated");
    }).catch(function(error) {
      console.log("Error Email Updated");

    });
  }

  render() {
    return (
      <>
      <form onSubmit={this.updateProfile}>
      <input onChange={event => this.setState({displayName: event.currentTarget.value})} type="text" value={this.state.user.displayName} placeholder="Name" />
      <input onChange={event => this.setState({email: event.currentTarget.value})} type="email" value={this.state.user.email} placeholder="E mail Id" />
      </form>
      </>
    );
  }
}

........................................................................................................................................................................................................................................................................

adel · Accepted Answer · 2020-06-07 12:38:35Z

2

the way you are updating state is wrong here how to do it properly :

   class Profile extends Component {
  static contextType = FirebaseContext;

  constructor(props) {
    super(props);

    this.state = {
      user: {}
    };

    this.updateProfile = this.updateProfile.bind(this);
  }

  componentDidMount() {
    console.log("Profile");

    this.context.auth.onAuthStateChanged(user => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }

  updateProfile(event) {
    event.preventDefault();

    var userData = this.context.auth.currentUser;

    userData
      .updateProfile({
        displayName: this.state.user.displayName
      })
      .then(function() {
        console.log("Profile Updated");
      })
      .catch(function(error) {
        console.log("Error Profile Updated");
      });

    userData
      .updateEmail(this.state.user.email)
      .then(function() {
        console.log("Email Updated");
      })
      .catch(function(error) {
        console.log("Error Email Updated");
      });
  }
handleChange = e => {
const target = e.target
this.setState(current => ({
  user: { ...current.user, [target.name]: target.value }
}));
};


  render() {
    return (
      <>
        <form onSubmit={this.updateProfile}>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.user.displayName}
            placeholder="Name"
            name="displayName"
          />
          <input
            onChange={this.handleChange}
            type="email"
            value={this.state.user.email}
            placeholder="E mail Id"
            name="email"
          />
        </form>
      </>
    );
  }
}

here is a working example

edited Jun 7, 2020 at 12:38

answered Jun 7, 2020 at 12:03

adel

3,5051 gold badge10 silver badges20 bronze badges

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

6 Comments

Jamshaid Alam Over a year ago

Its giving me error TypeError: Cannot read property 'name' of null in handleChange function

adel Over a year ago

oh sorry this is happening because the event is gone when accessing it from setState so to solve this you need to store the event in variable. check edited answer.

Jamshaid Alam Over a year ago

Now I can type and displayName is updating, but email is not updating. Can you tell me why? I know this should be another question. but it will be very helpful if you can figure it out whats wrong.

Jamshaid Alam Over a year ago

I meant, I can type displayName and email as well, so this question has been answered. but I am updating email and displayName in Firebase Auth. displayName is updating but email is not updating in Firebase Auth.

Jamshaid Alam Over a year ago

Its showing error

auth.esm.js:204 POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/setAccountInfo?key=XXXXXXXXXXXX_XXXXXXXXXXXXX 400

|

Evrim Persembe · Accepted Answer · 2020-06-07 12:20:50Z

1

You are using different values:

<input onChange={event => this.setState({displayName: event.currentTarget.value})} type="text" value={this.state.user.displayName} placeholder="Name" />

Your setState call is changing state.displayName, but you are reading the value from state.user.displayName.

Try changing your setState call to:

this.setState({ user: { ...this.state.user, displayName: event.currentTarget.value } })

And make similar changes to your other inputs.

edited Jun 7, 2020 at 12:20

answered Jun 7, 2020 at 11:56

Evrim Persembe

5775 silver badges14 bronze badges

6 Comments

Jamshaid Alam Over a year ago

I did this onChange={event => this.setState({ user: { ...this.state.user, displayName: event.currentTarget.value })} but showing error Syntax error: Unexpected token, expected ","

Evrim Persembe Over a year ago

I missed a closing curly bracket in my answer. Try it again. It should be: onChange={event => this.setState({ user: { ...this.state.user, displayName: event.currentTarget.value } })}.

Jamshaid Alam Over a year ago

Thanks, this is also working. Now I can type and displayName is updating, but email is not updating. Can you tell me why? I know this should be another question. but it will be very helpful if you can figure it out whats wrong.

Evrim Persembe Over a year ago

You need to make a similar change to the email input as well, such as: onChange={event => this.setState({ user: { ...this.state.user, email: event.currentTarget.value } })}. I would recommend trying to understand why the previous change made the code work though. IMHO, copy and pasting without understanding is going to make it harder for you to resolve issues in the future.

Jamshaid Alam Over a year ago

I meant, I can type displayName and email as well, so this question has been answered. but I am updating email and displayName in Firebase Auth. displayName is updating but email is not updating in Firebase Auth.

|

Collectives™ on Stack Overflow

Not able to type in Input field in React.js. Why?

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related