CODEWITHSUNDEEP
reactjs
VYS
VYS

Reputation: 41

Return only once but returning multiple times

Trying to display * once if required is true in that ingredientgroups but displaying twice

ingredientGroups: Array(2)
[ {isRequired: true,  in: "E", sort: 10}, {isRequired: true, in: "y", sort:1}]

<div>
    {this.props.ingredientGroups.map((ingredientGroup) => {
     return (
       <div id={ 'ff' + ingredientGroup.ingredientGroupId }
         key={ ingredientGroup.ingredientGroupId }
       >     
         {
          (ingredientGroup.isRequired === true) ?
            '*': ''
          }
       </div>  
     );
    })}
</div>

expected: *  


actual :  *  
          *

Upvotes: 0

Views: 105

Answers (3)

ellis hogan
ellis hogan

Reputation: 131

My initial thought was that you are mapping through the array. and if its set to true it gives a dot. As there are two items in the array evaluating to true it gives you two *. To test i ran the code 

class Application extends React.Component {

  render() {
    return <div>
    {this.props.ingredientGroups.map((ingredientGroup) => {
     return (
       <div id={ 'ff' + ingredientGroup.ingredientGroupId }
         key={ ingredientGroup.ingredientGroupId }
       >     
         {
          (ingredientGroup.isRequired === true) ?
            '*': 'd'
          }
       </div>  
     );
    })}
</div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application  ingredientGroups = {[ {isRequired: true,  in: "E", sort: 10}, {isRequired: true, in: "y", sort:1}]} />, document.getElementById('app'));

This got the same issue as you, but the code below works.

class Application extends React.Component {

  render() {
    return <div>
    {this.props.ingredientGroups.map((ingredientGroup) => {
     return (
       <div id={ 'ff' + ingredientGroup.ingredientGroupId }
         key={ ingredientGroup.ingredientGroupId }
       >     
         {
          (ingredientGroup.isRequired === true) ?
            '*': 'd'
          }
       </div>  
     );
    })}
</div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application  ingredientGroups = {[ {isRequired: true,  in: "E", sort: 10}]} />, document.getElementById('app'));

If you would like to keep two items in the array I suggest doing one of the following:

ingredientGroups: Array(2)
[ {isRequired: false,  in: "E", sort: 10}, {isRequired: true, in: "y", sort:1}]

OR

<div>
    {this.props.ingredientGroups.map((ingredientGroup) => {
     return (
       <div id={ 'ff' + ingredientGroup.ingredientGroupId }
         key={ ingredientGroup.ingredientGroupId }
       >     
         {
          (ingredientGroup.in === "E") ?
            '*': ''
          }
       </div>  
     );
    })}
</div>

Upvotes: 0

wentjun
wentjun

Reputation: 42526

The reason why 2 * are being printed is because of this condition:

(ingredientGroup.isRequired === true)

Within your ingredientGroups array, both objects have isRequired as true, which is why both are returning true when you iterate through this.props.ingredientGroups using Array.map(), and when the values of isRequired are passed through the above if statement. Hence, 2 *s are being rendered.

Upvotes: 1

MistaOS
MistaOS

Reputation: 255

If you're asking why you get two '*' on runtime as a result of the code you have, it's because you're mapping through the ingredientGroups array using map() function and printing either a * or nothing for each element in the array. The array has two elements.

That will result in the code inside the map() function being run for each element and the array and you will end up with two '*' being printed.

Please refer to map().

Upvotes: 0

Related Questions