-2

I just started learning React. I created a simple form. Now I want to log in the console. But it gives an error.

Here is an image of the error:

enter image description here

Also attaching my code:

import React from 'react';

function RegistrationForm(props){
    function handleSubmit(){
       console.log('Inside handle Submit');
    }

    return(
        <form onSubmit={handleSubmit}>
            <div className="form-group">
                <label htmlFor="task">Add task</label>
                <input id="task" className="form-control"/>
            </div>

            <button className="btn btn-primary">Submit</button>
        </form>
    )
}

export default RegistrationForm;
Michalis Garganourakis
  • 2,872
  • 1
  • 11
  • 24
Malsha Madushani
  • 27
  • 1
  • 3
  • 11

2 Answers2

2

Firstly we should install react dev tools extension for your browser if it not installed yet.

And your submit function you should call prevenDefault method to preventing refreshing your page. and use button type submit to your submit button.

Prevendefult Mdn

import React from 'react';

function RegistrationForm(props){

function handleSubmit(e){
        e.preventDefault()
         console.log('Inside handle Submit');
}

return(
    <form onSubmit={handleSubmit}>
        <div className="form-group">
            <label htmlFor="task">Add task</label>
            <input id="task" className="form-control"/>
        </div>

        <button type="submit" className="btn btn-primary">Submit</button>
    </form>
)
}

export default RegistrationForm;
MD. Sani Mia
  • 272
  • 1
  • 7
1

This has nothing to do with your form, but with chrome because it allows source maps now.

Since your html file doesn't link directly to your individual JS files, it requires a source map in order to be able to show where a log came from. React projects don't have a source map by default, so I would recommend that you just turn off your source map, which does mean that you don't see where a log is comming from in the console but react does this for you anyway.

The first solution on this thread explains quite well how to turn off soucemaps.

Leonard-H
  • 64
  • 1
  • 3