CODEWITHSUNDEEP
reactjsif-statement
RamAlx
RamAlx

Reputation: 7334

Render a table with an if condition in react

I want to render a table in react redux. To be more specific I have an accounts JSON array like this with 1- records:

[
{
    "size": "100",
    "date": "6/1/2017",
    "time": "09:23 AM",
    "status": "Working"
  },
{
    "size": "100",
    "date": "6/1/2017",
    "time": "09:23 AM",
    "status": "Completed"
  },
]

and I want to render the record with status Completed. So when I create my render Table function I write: 

if ((ordersTrades.map(orderTrade => orderTrade.status)) === 'Completed') {
 return (
   ...
      );
}

But it does not return anything. ordersTrades is the name of my JSON. Why is that?

Upvotes: 0

Views: 2186

Answers (2)

pawel
pawel

Reputation: 36965

First filter the array to get the items you need, then use map for rendering as usual:

ordersTrades.filter( order => order.status === "Completed" ).map( order => (
  /* render the item */
))

https://jsfiddle.net/1h03gdzy/1/

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

Write it like this, first filter the items that have status 'Completed', then use the map on that to render the html:

a = [
{
    "size": "100",
    "date": "6/1/2017",
    "time": "09:23 AM",
    "status": "Working"
  },
{
    "size": "100",
    "date": "6/1/2017",
    "time": "09:23 AM",
    "status": "Completed"
  },
]

b = a.filter(el=> el.status === 'Completed' )

console.log(b); // items that have status Completed

a.filter(el=> el.status === 'Completed' ).map(el=>{console.log('date', el.date) /*return here*/})

Upvotes: 1

Related Questions