CODEWITHSUNDEEP
javascriptreactjs
YVH
YVH

Reputation: 207

How to take a comma separated array and convert it into individual list items? React.js & Javascript

So I have this array that is displayed on the DOM like so:

jamaican rum,fresh lime juice,simple syrup,Angostura Aromatic Bitters

but I want to display it to the DOM like this:

this is what I have so far in my child component. The recipeIngredients is the list that I want to turn into an unordered list:

    render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients.toString();
    return (
        <div>
            <li>{recipe.recipeName}</li>
            <li>{recipeIngredients}</li>

            <div>
                <img src={recipe.smallImageUrls} alt=""/>
            </div>
        </div>
    )
}

Upvotes: 2

Views: 2297

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104399

To create an unordered list, you don't need to convert the recipeIngredients array into string, directly run loop on that and create the list.

Write it like this:

render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients;

    return (
        <div>
            <li>{recipe.recipeName}</li>
            <li>

                <ul>
                    {recipeIngredients.map((el,i) => <li key={i}>{el}</li> )}
                </ul>

            </li>
            <div>
                <img src={recipe.smallImageUrls} alt=""/>
            </div>
        </div>
    )
}

Working Code:

class App extends React.Component{
  
  render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients;

    return (
      <div>
          <li>{recipe.recipeName}</li>
          <ul>
            {recipeIngredients.map((el,i) => <li key={i}>{el}</li> )}
          </ul>
          <div>
            <img src={recipe.smallImageUrls} alt=""/>
          </div>
      </div>
    )
  }
}

var arr = ["jamaican rum", "fresh lime juice", "simple syrup", "Angostura Aromatic Bitters"];

ReactDOM.render(<App recipe={{recipeName:"Hello", ingredients: arr, smallImageUrls: ''}}/>, document.body)
<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>

Upvotes: 4

bprdev
bprdev

Reputation: 1048

For this type of situation, my preference is to use map.

render() {
    let recipeArray = [
      "jamaican rum",
      "fresh lime juice",
      "simple syrup",
      "Angostura Aromatic Bitters"
    ];
    let items = recipeArray.map((item, index) => <li key={index}>{item}</li>);
    return (
      <div>
        <ul>{items}</ul>
      </div>
    );
  }

here is a CodePen link to working code: https://codepen.io/anon/pen/ypEvVm

Upvotes: 1

Related Questions