Use multiple lines javascript in React

Question

I have this source code, in React function component

return (
  result.map(item => (
    <tr key={item.id}>
      <td>
      {new Date(item.pub_date).getFullYear()} /
      {new Date(item.pub_date).getMonth()} /
      {new Date(item.pub_date).getDate()}
      </td>
    </tr>

However in this script, it require three Date instances.

I want to shorten like this.

var date = new Date(item.pub_date)
date.getFullYear() / date.getMonth() /date.getDate()

Is it correct idea? or is it impossible to this in JSX??

Dharman · Accepted Answer · 2021-03-12 07:38:41Z

2

You can achieve what you want with a little different way with the use of template literals and setting date variable outside of the return scope.

return (
  result.map(item => {
    const date = new Date(item.pub_date)

    return (
      <tr key={item.id}>
        <td>
        {`${date.getFullYear()} / ${date.getMonth()} / ${date.getDate()}`}
        </td>
      </tr>
    )
  })
)

edited Mar 12, 2021 at 7:38

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Mar 12, 2021 at 7:33

Ugur Eren

2,2642 gold badges14 silver badges25 bronze badges

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

Comments

NeERAJ TK · Accepted Answer · 2021-03-12 07:36:15Z

0

You can create a seperate function for formatting date:

function getDate(dateValue){
     let date = new Date(dateValue);
     return `${date.getFullYear()} / ${date.getMonth()} / ${date.getDate()}`
    }

return (
  result.map(item => {
    return (
      <tr key={item.id}>
        <td>
        {getDate(item.pub_date)}
        </td>
      </tr>
    )
  })
)

answered Mar 12, 2021 at 7:36

NeERAJ TK

2,7151 gold badge18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Use multiple lines javascript in React

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