Display comma separated elements of array in 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>
     );
     }

}

My sample-recipe.js file is as follows

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

Hi, I am new to React.I am making this recipe book project. I want to display ingredients separated by space or comma. Now it is displaying as "spinachchillies". And is it a correct way of making ingredient an array?

i also want to learn react... what is the best source to cover all important topics... — Shubham Kandiyal
– Shubham Kandiyal, Commented Dec 21, 2017 at 9:30

Shubham Khatri · Accepted Answer · 2017-04-09 17:42:10Z

18

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

answered Apr 9, 2017 at 17:42

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sugandh goyal Over a year ago

This also shows join is not a function . Whenever I add a new recipe with my AddRecipe component

Vasyl Gutnyk · Accepted Answer · 2017-10-29 11:13:47Z

3

You can use if expression or ternary operator:

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

answered Oct 29, 2017 at 11:13

Vasyl Gutnyk

5,0593 gold badges37 silver badges38 bronze badges

Comments

Igor Modesto · Accepted Answer · 2019-01-15 18:42:02Z

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;

eliezra236 · Accepted Answer · 2022-07-22 15:42:57Z

2

If it's a simple array of strings you can use join

const myArr = ['hello', 'world'];
const stringifyArr = myArr.join(', ');
console.log(stringifyArr) // 'hello, world'

answered Jul 22, 2022 at 15:42

eliezra236

1,0452 gold badges8 silver badges22 bronze badges

Comments

Mayank Shukla · Accepted Answer · 2017-04-10 19:00:40Z

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

edited Apr 10, 2017 at 19:00

answered Apr 9, 2017 at 17:42

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

4 Comments

sugandh goyal Over a year ago

This shows .map is not a function whenever I add a new recipe with my AddRecipe component.

Mayank Shukla Over a year ago

just put the check, before using map.

sugandh goyal Over a year ago

what check? What should I do for this?

Mayank Shukla Over a year ago

check the updated answer, created a sample working solution, values in ingredient input element should be , separated, run the above snippet and check :)

Myo Min · Accepted Answer · 2024-02-18 09:21:53Z

0

You can try this.

{recipe.ingredient.join(",")}

answered Feb 18, 2024 at 9:21

Myo Min

1

Collectives™ on Stack Overflow

Display comma separated elements of array in React

6 Answers 6

1 Comment

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related