React Error: input is a void element tag and must neither have 'children' nor use 'dangerouslySetInnerHTML'

Dung Do Tien Mar 23 2021 413

I created a reactjs project and I have a login form as below:

import React , { Component } from 'react'

class Login extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <form className="login-form">
                <h1>login</h1>
                <div>
                    <div className="form-group">
                        <input name="email" type="text" value="" placeholder="Your Email" />
                    </div>
                    <div className="form-group">
                        <input name="password" type="Password" value="" placeholder="Password" />
                    </div>
                    <input type="submit">Submit</input>
                </div>
            </form>
        )
    }
}

export default Login

But when run this site but I got an error input is a void element tag and must neither have 'children' nor use 'dangerouslySetInnerHTML'.

Please leave a comment if you have any suggestions.

Have 1 answer(s) found.
  • D

    Do Chuong Mar 23 2021

    You wrong syntax <input> tag. You have to change:

    <input type="submit">Submit</input>

    To

    <input type="submit" value="Submit" />

    Or

    <button type="submit">Submit</button>

    I hope it helpful for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close