JSX Bootstrap unterminated

Question

I'm using bootstrap with react, and the compiler is failing on grounds that there is unterminated JSX contents. I've been through it a dozen times, and whichever way the ternary results, I don't see any unclosed tags. I'm new to react, so I suppose something else must be wrong. To cut down on code, I've only included the return():

<div className="container-fluid">

        <div className="row">
          <div className="col-12">
            <SearchBar />
          </div>
        </div>


    {this.state.results ? (
            <div className="row">
                <div className="col-12">
                        <div className="row">
                            <div className="col-6 offset-md-3">
                        <div className="row">
                            <div className="col">
                                        <InputRange
                                        maxValue={this.state.maxPrice}
                                        minValue={this.state.minPrice}
                                        value={this.state.priceRange}
                                        formatLabel={x => {
                                        return `£${x}`;
                                        }}
                                        onChange={value => this.setState({ priceRange: value })}
                                        />
                            </div>
                        </div>

                        <div className="row">
                            <div className="col">
                                            Selection: {visibleResults.length}
                            </div>
                        </div>
                    <div>
                </div>

                    <div className="row">
                            <div className="col-6 offset-md-3">
                                 {visibleResults.map((item, index) => (
                                    <Link to={`/listing/${item.id}`}>
                                    <SearchResult result={item} key={index} />
                                    </Link>
                                ))}
                            </div>
                </div>
            </div>
            </div>
        ) : (
        <div className="row">
            <div className="col">
                    <h1>LOADING...</h1>
                </div>
        </div>
    )}

    </div>
)

Answer 1

You need to close the div here:

                    <div className="row">
                        <div className="col">
                                        Selection: {visibleResults.length}
                        </div>
                    </div>
                <div> // This should be </div>
            </div>