Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to make my form data appear on the console after I submit the form?

I am learning React. I have made the form using react-bootstrap. I was trying to output the data entered in my form to be displayed on the console when I submit the form. Upon submitting the form the data appears for a small-time span but then the page reloads and the console becomes blank.

Here is my code

import React, { Component } from 'react';
import classes from './Admin.css';
import { Form, Button, Container } from 'react-bootstrap';

class Admin extends Component {
    state = {
        content: null,
        category: null
    }


    onChangeContentHandler = (event) => {
        this.setState({ content: event.target.value });

    }

    onChangeCategoryHandler = (event) => {
        this.setState({ category: event.target.value });

    }

    onSubmitHandler=()=>{
        alert("Content: "+ this.state.content+"    Category: "+ this.state.category);

    }


    render() {
        return (
            <Container className={classes.Body}>
            <Form onSubmit={this.onSubmitHandler}>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Label>Content</Form.Label>
              <Form.Control type="text" 
                            placeholder="Enter content" 
                            onChange={this.onChangeContentHandler}/>
              
            </Form.Group>
          
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Category</Form.Label>
              <Form.Control type="text" 
                            placeholder="Enter category" 
                            onChange={this.onChangeCategoryHandler}/>
            </Form.Group>
            
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>

            </Container>

        );
    }
}

export default Admin;

I am unable to detect why my page is reloading upon submittion. What should I do to not let my form data disappear from the console?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Make your submitHandler function like this :

onSubmitHandler=(e)=>{
        e.preventDefault()
        alert("Content: "+ this.state.content+"    Category: "+ this.state.category);

    }

The preventDefault function prevents the default action of reloading the website after the form submission.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading