Reagieren: unerwartete Token Rückkehr

Question

: Ich bin zu reagieren und ich habe diesen Code ein:

render() { 
     return (
      <div> 
       <form> 
        <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} /> 
        <input type="submit" value="Valider" onClick={this.update} /> 
       </form> 
       var list = this.state.liste.map(function(elt) { 
        return <li>{elt}</li> 
       }); 
       <ul>{list}</ul> 
      </div> 
     ); 
    } 

Ich habe einen Syntaxfehler:

Unexpected token return <li>{elt}</li> 
       ^

Ich verstehe nicht, warum ... Danke für jede Hilfe!

Answer 1

Umstrukturieren der Code wie folgt:

render() { 

var list = this.state.liste.map(function(elt) { 
        return <li>{elt}</li> 
       }); 
     return (
      <div> 
       <form> 
        <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} /> 
        <input type="submit" value="Valider" onClick={this.update} /> 
       </form> 

       <ul>{list}</ul> 
      </div> 
     ); 
    } 

oder

render() { 
     return (
      <div> 
       <form> 
        <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} /> 
        <input type="submit" value="Valider" onClick={this.update} /> 
       </form> 
       <ul>{this.state.liste.map(function(elt) { 
        return <li>{elt}</li> 
       });}</ul> 
      </div> 
     ); 
    } 

Sie können Code innerhalb der JSX Syntax hinzufügen, ohne {}