JSX: Expected corresponding closing tag for <div>

Question

I am compiling JSX code using Babel 6.0 and I have run into this error. After it saying that "adjacent elements" need to be wrapped in "an enclosing tag", it now says the tags are missing "corresponding enclosing tags", despite that the <div> tag is closed. Why is that happening? Thank you.

Here is the code: It shows the </form> line as the error location.

render: function() {
    return (
        <div>
            <form action={this.props.action} method={this.props.method}/>
                <input
                    type={this.props.input1type}
                    value={this.state.input1value}
                />
                <input
                    type={this.props.input2type}
                    value={this.state.input2value}
                />
            </form>
        </div>
    );
}

Answer 1

There is a typo there. A self enclosing form. Just remove the / from the end opning form tag.

render: function() {
    return (
        <div>
            <form action={this.props.action} method={this.props.method}>
                <input
                    type={this.props.input1type}
                    value={this.state.input1value}
                />
                <input
                    type={this.props.input2type}
                    value={this.state.input2value}
                />
            </form>
        </div>
    );
}