ternary operator inside map

Question

I'm working on a webapp where the user views a list of items and can mark certain items as favourites. The favourites are provided as an array of ID's with a prop (this.props.favourites). To prevent duplicate entries I want to replace the 'add to favourites' button with a 'delete from favourites' button if the item.id is already in the this.props.favourites array.

However, the ternary If statement I've made crashes on a syntax error. Yet I thought I followed the official example (https://reactjs.org/docs/conditional-rendering.html) pretty closely.

This is the code that I used:

render() { 

       const items = this.state.items.map((item, index) => (
           <p key={index}>
               {item.name}
           </p>

           {(this.props.favourites.include(item) ? (
               <button>add fvourites</button>
             ) : (
               <button>delete</button>
     )}

       ));
       return (
           <div>
               <button onClick={this.LoadApi}>Show fetch Items</button>
               <div>{items}</div>
           </div>
       );
   }
}

Does anyone have an idea what I am doing wrong?

Answer 1

Issues:

1- You are returning 2 elements inside map callback method, that is not correct, so wrap them inside a div.

2- You have a extra ( here: {(this.props.favourites.include(item)

3- Use includes not include.

Solution:

const items = this.state.items.map((item, index) => (
    <div key={index}>
        <p>
           {item.name}
        </p>

        {this.props.favourites.includes(item) ? (
           <button>add fvourites</button>
        ) : (
           <button>delete</button>
        )}
    </div>
))

Answer 2

try something like below

{this.props.favourites.includes(item) ? <button>add favourites</button> :
     <button>delete</button>
 }