tableau d'affichage dans React

Question

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state={ recipes :[] } 
    this.addRecipe=this.addRecipe.bind(this); 
    } 

    addRecipe (recipe) { 
    console.log({...recipe}) 
     this.setState({ 
     recipes: [...this.state.recipes, recipe] 
    }); 
    } 
    componentWillMount(){ 
    this.setState({ 
     recipes : require('./sample-recipes') 
    }); 
    } 
    render() { 
    return (
     <div className="App"> 
     <h2>Welcome to the Recipe Book</h2> 
     <dl> 
     {this.state.recipes.map(recipe => { 
     return (<div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       <dd>{recipe.ingredient}</dd> 
       <hr></hr> 
       </div> 
       ) 
     }) 
    } 
     </dl> 
    <button className="addButton" onClick={() => 
     {this.setState({ display: !this.state.display })}}> 
    Add Recipe 
    </button> 
    <AddRecipe addRecipe={this.addRecipe} 
    display={this.state.display} /> 
    </div> 
    ); 
    } 

} 

---

Mon exemple de fichier-recipe.js est le suivant

module.exports = [ 
{ 
name : 'chicken', 
ingredient : ['spinach','chillies'] 
    }];  

---

Comment afficher des ingrédients séparés par un espace ou une virgule. Maintenant, il affiche comme "spinachchillies". Et est-ce la bonne façon de faire de l'ingrédient un tableau?

Answer 1

Depuis ingrédient est un array of strings vous pouvez join pour créer une chaîne et afficher le résultat

{this.state.recipes.map(recipe => { 
     return (<div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       <dd>{recipe.ingredient.join(",")}</dd> 
       <hr></hr> 
       </div> 
       ) 
     }) 
    } 

Answer 2

Ou vous pouvez utiliser la carte pour cela aussi, comme ceci:

{ 
    this.state.recipes.map(recipe => { 
     return ( 
      <div key={recipe.name}> 
       <dt>{recipe.name}</dt> 
       { 
        recipe.ingredient && recipe.ingredient.map(el => <dd key={el}> {el} </dd>) 
       } 
       <hr></hr> 
      </div> 
     ) 
    }) 
} 

Ou rejoindre le tableau utilisant ,, comme ceci:

<dd> {recipe.ingredient.join(',')} </dd> 

Vérifiez cet exemple de travail:

let data = [ 
 
{ 
 
    name : 'chicken', 
 
    ingredient : ['spinach','chillies'] 
 
}];  
 
    
 
class App extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
     this.state={ recipes :[] } 
 
     this.addRecipe=this.addRecipe.bind(this); 
 
    } 
 

 
    addRecipe (recipe) { 
 
     this.setState({ 
 
     recipes: [...this.state.recipes, recipe] 
 
     }); 
 
    } 
 
    componentWillMount(){ 
 
     this.setState({ 
 
     recipes : data 
 
     }); 
 
    } 
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <h2>Welcome to the Recipe Book</h2> 
 
     <dl> 
 
     {this.state.recipes.map(recipe => { 
 
      return (<div key={recipe.name}> 
 
       <dt>{recipe.name}</dt> 
 
       <dd>{recipe.ingredient.join(',')}</dd> 
 
       <hr></hr> 
 
       </div> 
 
       ) 
 
      }) 
 
     } 
 
     </dl> 
 
     
 
     Add Recipe 
 
     <AddRecipe addRecipe={this.addRecipe}/> 
 
     </div> 
 
    ); 
 
} 
 
} 
 

 
class AddRecipe extends React.Component{ 
 
    add(){ 
 
     this.props.addRecipe({name: this.name.value, ingredient: this.ing.value.split(',')}); 
 
    } 
 
    render(){ 
 
     return (
 
     <div> 
 
      <input ref={name=>this.name=name}/> 
 
      <input ref={ing=>this.ing=ing}/> 
 
      <input type='button' onClick={this.add.bind(this)} value='Add'/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, 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'/>

Answer 3

Vous pouvez utiliser si expression ou ternaire opérateur:

<span> 
    { 
     testArray.length ? testArray.map((itemTestArray) => 
     (<span> {itemTestArray} </span>)) : '-' 
    } 
</span>