Convert date inside map function of render in ReactJs

Question

The following code is inside return of render function

this.props.investment.selectedInvestor.rounds.map((item,index)=>{
   if(item.type.toLowerCase()==this.state.securityType.toLowerCase())
   {
      return(
        <tr onClick={()=>this.showRoundDetails(true,item)}>
        <td>
          <strong>{item.round_name}</strong><br/>
          <span>{item.close_date}</span>
          </td>
        <td>{item.security_type}</td>
        <td>{item.sharing_plan}</td>
        <td>{item.investments[0].status}</td>
        <td>{item.rate}</td>
        <td>{item.frequency}</td>
        <td>{item.investments[0].current_amount}</td>
        </tr>
        )  
    }                             
  }

I want to convert {item.close_date} to another format i.e use this function toLocaleDateString()
I tried declaring another variable outside return and then convert the date but still could not solve it

whats the format of item.close_date? Are you OK with using external libraries? — Priyesh Kumar
– Priyesh Kumar, Commented May 12, 2017 at 7:54
if item.close_data is a Date object then you can use that method directly like this: <span>{item.close_date.toLocaleDateString()}</span> — Mayank Shukla
– Mayank Shukla, Commented May 12, 2017 at 7:56

Mayank Shukla · Accepted Answer · 2017-05-12 08:07:11Z

9

{item.close_date} is a string (that contains the date) as you mentioned in comment, to use toLocaleDateString() method first you need to convert that string into date object by using new Date(), after that you can use any date method on that.

Use this:

<span>{ (new Date(item.close_date)).toLocaleDateString() }</span>

answered May 12, 2017 at 8:07

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

Priyesh Kumar · Accepted Answer · 2017-05-12 10:26:18Z

1

Using JavaScript date method:

<span>{ (new Date(item.close_date)).toLocaleDateString() }</span>

var d =  new Date("2017-05-10T11:01:50.569Z");
console.log(d.getDay(), d.getMonth(), d.toLocaleDateString())

Using MomentJS library

<span> 
    { 
       moment("2017-05-10T11:01:50.569Z", "YYYY-MM-DDThh:mm:ss.SSS").format("hh:mm a") 
    }
</span>

var d = moment("2017-05-10T11:01:50.569Z", "YYYY-MM-DDThh:mm:ss.SSS")
console.log(d.format("hh:mm a"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

I prefer momentjs because I can parse and get date in any format.

edited May 12, 2017 at 10:26

answered May 12, 2017 at 8:19

Priyesh Kumar

2,8571 gold badge17 silver badges29 bronze badges

Collectives™ on Stack Overflow

Convert date inside map function of render in ReactJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related