score:14

Accepted answer

Since ingredient is an array of strings you can join it to create a string and display the result

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

score:1

Either you can use map for that also, like this:

{
    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>
        )
    })
}

Or join the array using , , like this:

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

Check this working example:

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'/>

score:2

Map may be within Map. Ex:

import React from "react";
import PropTypes from "prop-types";
import { Row, Col } from "antd";

class Servers extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    server: "Server 1",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 2",
                    status: "running",
                    appList: ["PL", "AM"]
                },
                {
                    server: "Server 3",
                    status: "warning",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 4",
                    status: "offline",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 5",
                    status: "running",
                    appList: ["PL", "IM"]
                },
                {
                    server: "Server 6",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                { server: "Server 7", status: "running", appList: ["PL"] },
                {
                    server: "Server 8",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 9",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 10",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 11",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                },
                {
                    server: "Server 12",
                    status: "running",
                    appList: ["PL", "AM", "IM"]
                }
            ]
        };
    }

    render() {
        return (
            <React.Fragment>
                <Row type="flex" justify="space-around" align="middle">
                    {this.state.items.map(item => (
                        <Col span={5} className="box">
                            <div className={["server", item.status].join(" ")}>
                                <ul>
                                    <li />
                                    <li />
                                    <li />
                                </ul>
                            </div>
                            <ul className="appList">
                                {item.appList.map(app => (
                                    <li>{app}</li>
                                ))}
                            </ul>
                            <h6 className="server-name">{item.server}</h6>
                        </Col>
                    ))}
                </Row>
            </React.Fragment>
        );
    }
}

Servers.propTypes = {
    children: PropTypes.any
};

export default Servers;

score:3

You can use if expression or ternary operator:

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

Related Query

More Query from same tag