ReactJS - Why does the form element return null?

Question

I am using ReactJS to make a Login/Signup modal in which there is a signin and a signup form that users can switch between. When a user clicks on the "Sign in" tab, the "signup" form is moved out of the view, and the "signin" form is moved into the view. However, I got the error saying that document.getElementById("signup") returned a null (the "signin" form and "btn" have the same problem). Also, the console said that "16 stack frames were collapsed" at line 55. I attach the screenshots of the JS file, CSS file, and the localhost error page. Thanks for your patience.

I added the screenshots inline. However, you should post the code as text. — Igor F., Jan 13 '20 at 08:29

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

If you are doing the right thing in signUp() and signIn(), you probably want to change signUp() {} to signUp = () => {} also signIn() {} to signIn = () => {}

then

<Button onClick={this.signUp} /> instead of <Button onClick={this.signUp()} /> also <Button onClick={this.signIn} /> instead of <Button onClick={this.signIn()} />

With reference to your new code, I guess you are not supposed to use document.getElementById in constructor because the stuff you are calling might not exist in DOM yet, you may want to read this.

If you are not going to animate your view, but just purely changing their left position with absolute position, I suggest you to put the styles that you want to manipulate in the state.

constructor(props) {
  super(props);

  this.state = { 
    signupLeftPosition: 0, // put initial position here, now I assume it is 0
    signinLeftPosition: 0, // put initial position here, now I assume it is 0
    buttonLeftPosition: 0, // put initial position here, now I assume it is 0
  };
}

And your signUp()

signUp = () => {
  this.setState({ 
    signupLeftPosition: 50, 
    signinLeftPosition: 450, 
    buttonLeftPosition: 0
 })
}

And your forms, I'll take the form with the id "signup" as an example:

<form 
  class="input-group' 
  id="signup" 
  style={{ left: this.state.signupLeftPosition }} 
/>

Also do the same to your component with the id signin and button

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 13 '20 at 08:01

Andus

1,431
8
22

Thanks for your answer. It complied after I made the changes, but when I clicked the "Sign up" or "Sign in" tab, the console reported the same error. – Xi Liu Jan 13 '20 at 17:59
What is `this.signup`? how do you define it? – Andus Jan 14 '20 at 03:15
My bad just realized that I did not upload the first part of the code... I define this.signup=document.getElementById("signup"). – Xi Liu Jan 14 '20 at 17:25
More complete code: class Header extends Component { constructor(props) { super(props); this.state={ showModal: false }; this.openModal... this.closeModal... this.signup = document.getElementById("signup"); this.signin = document.getElementById("signin"); this.btn = document.getElementById("btn"); } signIn = () => { this.signup.style.left = "-400px"; this.signin.style.left = "50px"; this.btn.style.left = "110px"; } – Xi Liu Jan 14 '20 at 17:27
I suggest you to edit your question and add the code back with it being wrapped with a code block in the first place, please have a look at this https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks – Andus Jan 15 '20 at 00:40

ReactJS - Why does the form element return null?

1 Answers1