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>
      </>
    );
  }
}

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

Answer 1

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

Answer 2

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.