while coding an e-commerce app in a course im following i get an error even though i followed the tutorial exactly.

the following is my SignUp component that reads user input and creates a user using firebase firestore.

import React from "react";

import FormInput from "../form-input/form-input.component";
import CustomButton from "../custom-button/custom-button.component";
import {
  auth,
  createUserProfileDocument,
  createUserWithEmailAndPasswordd,
} from "../../firebase/firebase.utils";

import "./sign-up.styles.scss";

class SignUp extends React.Component {
  constructor() {
    super();

    this.setState = {
      displayName: "",
      email: "",
      password: "",
      confirmedPassword: "",
    };
  }
  handleSubmit = async (event) => {
    event.preventDefault();
    const { displayName, email, password, confirmedPassword } = this.state;
    if (password !== confirmedPassword) {
      alert("Passwords dont Match");
      return;
    }

    try {
      const { user } = await createUserWithEmailAndPasswordd(
        auth,
        email,
        password
      );

      await createUserProfileDocument(user, { displayName });

      this.setState({
        displayName: "",
        email: "",
        password: "",
        confirmedPassword: "",
      });
    } catch (error) {
      console.log(error);
    }
  };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    const { displayName, email, password, confirmedPassword } = this.state;
    return (
      <div className="sign-up">
        <h2 className="title">I do not have an account</h2>

        <span>SignUp with your email and Password</span>

        <form className="sign-up-form" onSubmit={this.hadleSubmit}>
          <FormInput
            type="text"
            name="displayName"
            value={displayName}
            onChange={this.handleChange}
            label="Display Name"
            required
          />
          <FormInput
            type="email"
            name="email"
            value={email}
            onChange={this.handleChange}
            label="Email"
            required
          />
          <FormInput
            type="password"
            name="password"
            value={password}
            onChange={this.handleChange}
            label="Password"
            required
          />
          <FormInput
            type="password"
            name="confirmerPassword"
            value={confirmedPassword}
            onChange={this.handleChange}
            label="Confirmed Password"
            required
          />

          <CustomButton type="submit">Sign Up</CustomButton>
        </form>
      </div>
    );
  }
}

export default SignUp;

I get the error stating:

sign-up.component.jsx:58 Uncaught TypeError: Cannot destructure property 'displayName' of 'this.state' as it is null.
    at SignUp.render (sign-up.component.jsx:58:1)
    at finishClassComponent (react-dom.development.js:19752:1)
    at updateClassComponent (react-dom.development.js:19698:1)
    at beginWork (react-dom.development.js:21611:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Thanks in Advance I'm still learning react and a bit lost.

CodePudding user response：

You have an invalid state initial set in the constructor:

constructor() {
  super();

  this.setState = {
    displayName: "",
    email: "",
    password: "",
    confirmedPassword: "",
  };
}

It is invalid due to setState is a function that comes from React.Component via inheriatance, and you are "killing" it making it an object.

You need to change it to

constructor() {
  super();

  this.state = {
    displayName: "",
    email: "",
    password: "",
    confirmedPassword: ""
  };
}