I'm trying to make a log in form in Reactjs using bootstrap. I've created two classes, the App.js one which is the main class and the Handler.js one which is supposed to show different content based on state variable, using the alert function, I discovered that state gets reset after submit button is clicked.

Why does this happen? What do I have to change in order for the state variable to be set to one after the pushing of the button? Also, the username and password values have to be passed in the input fields?

Handler.js

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import {
  Component
} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap";
import Button from 'react-bootstrap/Button';
import {
  Form
} from 'react-bootstrap';
class Handler extends Component {
  state = 0;
  username = null;
  password = null;
  constructor() {
    super();
    this.state = 0;
  }
  submitUserPass = () => {
    this.state = 1
    alert(this.state);
  }
  setUs(username) {
    this.username = username;
  }
  setPs(password) {
    this.password = password;
  }
  render() {
    if (this.state == 0) {
      return (

        <Form onSubmit = {this.submitUserPass}>
            <Form.Group controlId = "usernameId" >
                <Form.Label > Username < /Form.Label> 
                <Form.Control value = {this.username}
                onChange = {event => this.setUs(event.target.value)}
                type = "text"
                placeholder = "username" / >
           </Form.Group>
           <Form.Group controlId = "passwordId" >
               <Form.Label > Password </Form.Label>
               <Form.Control value = {this.password}
               onChange = {event => this.setPs(event.target.value)}
               type = "password"
               placeholder = "password" />
           </Form.Group>
           <Button className = "mt-2 "
                   variant = "primary"
                   type = "submit" >
                   Log in
           </Button>
        </Form >
      );
    }
  }
}

export default Handler; 

App.js

class App extends Component {
  constructor() {
    super()
  }
  render() {
    return (
        <Container >
          <Row >
            <Col >
            </Col>
            <Col> 
            </Col> 
            <Col> 
            </Col> 
          </Row> 

          <Row>
            <Col>
            </Col>
            <Col xs = {5} > 
                <Handler/> // The handler component
            </Col> 
            <Col>
            </Col>
          </Row>

          <Row>
            <Col>
            </Col> 
            <Col>
            </Col> 
            <Col>
            </Col>
          </Row>
        </Container>
    );
  }
}

export default App;    

index.js

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
       
        <App />
        
      </React.StrictMode>
    );

package json

      {
      "name": "boot",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.2.2",
        "jquery": "^3.6.1",
        "popper.js": "^1.16.1",
        "react": "^18.2.0",
        "react-bootstrap": "^2.6.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
    }

CodePudding user response：

submitUserPass=(e)=>{
        e.preventDefault();  // This will stop the page from refreshing
        this.state=1 // Also this is not the right way to assign a state, if that's what you're trying to do.
        alert(this.state);
}

Use this.setState(1) instead.

CodePudding user response：

whenever you submit a form, the page refreshes hence the state also refreshes. In order to prevent this add a preventDefault() in submitUserPass()

const submitUserPass = (event) => {
    event.preventDefault()
    //operation to be performed on submit
    this.setState(1)
  };