ReactJs - सिंटेक्स त्रुटि: एम्बेडेड: अन्तर्निहित जेएसएक्स सामग्री

Question

मैं रेक्टजेस के लिए नया हूं और मेरे पास एक बेवकूफ मुद्दा है, मुझे लगता है, लेकिन मुझे इसका कोई कारण नहीं दिख रहा है। मेरे प्रशिक्षण कोड:

var ListComponent = React.createClass({ 
    render: function() { 
     return (
      <li>{this.props.value}</li> 
     ); 
    } 
}); 

var TodoComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      listPoints: [] 
     } 
    }, 
    addListPoint: function(event) { 
     if (event.target.value !== '') { 
      this.setState({ 
       listPoints: this.state.listPoints.push(event.target.value) 
      }); 
     } 
    }, 
    render: function() { 
     var listPoints = []; 
     for (var i=0; i<this.state.listPoints.length; i++) { 
      listPoints.push(
       <ListComponent>{this.state.listPoints[i]}<ListComponent/> 
      ); 
     } 
     return (
      <ul>{listPoints}</ul> 
      <input type="text" onBlur={this.addListPoint}/> 
     ); 
    }, 
}); 


React.render(
    <TodoComponent />, 
    document.getElementById('container') 
); 

और मेरे ट्रैस बैक:

Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21) 
    40 | 
    41 | React.render(
> 42 |  <TodoComponent />, 
    |     ^
    43 |  document.getElementById('container') 
    44 |); 
    45 | 

हर टैग लगती को बंद करना पड़ा। क्या कोई मुझे उस स्थान पर इंगित करता है जहां समस्या शुरू हुई?

Answer 1

आप अपनी सूची को ठीक से बंद हो रहा नहीं कर रहे हैं:

<ListComponent>{this.state.listPoints[i]}</ListComponent> 

आप <ListComponent/> लिखा था (कोई सामग्री के साथ एक स्वतः बंद होने वाले टैग)

इसके अलावा, आप क्या करने की जरूरत है कोहेई ताकाता कहते हैं - प्रस्तुत करने के लिए एक मूल तत्व होना चाहिए (हालांकि प्रतिक्रिया 16+ में आप एक सरणी वापस कर सकते हैं या <React.Fragment> में अपने तत्वों को लपेट सकते हैं)।

Answer 2

TodoComponent का कार्य 2 तत्व लौटाता है। मुझे लगता है कि यह एक तत्व होना चाहिए। कृपया 0 तत्वों को <div> या कुछ द्वारा संलग्न करने का प्रयास करें। इस तरह:

<div> 
    <ul>{listPoints}</ul> 
    <input type="text" onBlur={this.addListPoint}/> 
</div>