Search code examples
reactjsbabeljs

React Syntax Error : Expected corresponding JSX closing tag for <img>


I'm beginner in React and I try to do a "Camper Leader Board" project from FreeCodeCamp. In StackOverflow code snippet it throws me:
` "message": "SyntaxError: Inline Babel script: Expected corresponding JSX closing tag for Please help me to find out what is wrong. Here's the code:

"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    loadCampersFromServer() {
     ...
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return <CampersList />;
    }
}

class CampersList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        let campersNodes = this.state.data.map((element, index) => {
            return (
                <Camper user={element} index={index} />

            );
        });
        return (
            <table>...</table>
        )
    }
}


class Camper extends React.Component{
     constructor(props){
         super(props);
     }
     render(){
         <tr>
             <td>{this.props.index}</td>
             <td>
                 <img src = {this.props.user.img} alt="logo">
                 {this.props.user.userName}
             </td>
             <td>{this.props.user.recent}</td>
             <td>{this.props.user.alltime}</td>
         </tr>
     }
}

ReactDOM.render(<TableBox />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>


Solution

  • You need to close your img tag with a closing />:

    <img src={this.props.user.img} alt="logo" />
    

    JSX is not as lenient as HTML when it comes to properly closing tags.