React - Parsing error: Expected corresponding JSX closing tag for <input>

Question

I am new to React and I am working on a component. I have the following code:

order-item.component.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';

import './order-item.scss';


class OrderItem extends Component {
    render() {
        return (
            <div class="wrapper">
                <div class="order-box">
                    <div class="order-header">
                        <h2>ORDER #1</h2>
                    </div>
                    <div class="order-list">
                        <ul>
                            <li>
                                <label class="container">Item #1 (2x)
                                    <input type="checkbox" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                            </li>

                            <li>
                                <label class="container">Item #3 (2x)
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                </label>
                            </li>

                            <li>
                                <label class="container">Item #6 (1x)
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
}

export default OrderItem;

However, I am getting the following error:

I have read that in HTML, the <input> tag has no end tag. I am not sure how I can resolve this error. Any insights are appreciated.

Answer 1

把 / 放在最后

<input type="checkbox" /> or <input type="checkbox"></input>

Answer 2

好像你忘了关闭输入标签

<input type="checkbox" />

Answer 3

You will need to close the input tag:

<input ...props />

Since you write JSX in the react component and not actual HTML, this is one of the anomaly you've to deal with :/