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>
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.