render table row from array: react

Question

I am trying to call a function to render table rows using the map function on an array of texts I receive as props but for some reason they are not being rendered. Am I making a syntactical mistake? I have verified that the license text props array is not empty and simply returns an array of strings.

const showLicenseText = () => {
 return licenseText.map(text => {
      <tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>
  })
}

The original code in render method is:

return (
  <table>
    <tbody>
      {bbbFileOpenDate && (
        <tr>
          <ThPadding>
            {text.bbbFileOpened}
            {':'}
          </ThPadding>
          <td>{bbbFileOpenDate}</td>
        </tr>
      )}
      {yearsInBusiness && !isOutOfBusiness && (
        <tr>
          <ThPadding>
            {yearsInBusinessLabel}
            {':'}
          </ThPadding>
          <td>{yearsInBusiness}</td>
        </tr>
      )}
      {businessStartDate && (
        <tr>
          <ThPadding>
            {businessStartDateLabel}
            {':'}
          </ThPadding>
          <td>{businessStartDate}</td>
        </tr>
      )}
      {showLicenseText}
      {locationStartDate && (
        <tr>
          <ThPadding>
            {locationStartDateLabel}
            {':'}
          </ThPadding>
          <td>{locationStartDate}</td>
        </tr>
      )} ....

maybe surround with return ( <tr> etc..</tr> ) ?

Mike M
– Mike M

2019-08-29 17:47:40 +00:00
Commented Aug 29, 2019 at 17:47 — Mike M
– Mike M, Commented Aug 29, 2019 at 17:47
nope does not work

Ackman
– Ackman

2019-08-29 17:56:21 +00:00
Commented Aug 29, 2019 at 17:56 — Ackman
– Ackman, Commented Aug 29, 2019 at 17:56

HellaDev · Accepted Answer · 2019-08-29 18:14:06Z

1

In your map you need to return your row. The map expects something returned

const showLicenseText = () => {
 return licenseText.map(text => {
      return (<tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>)
  })
}

answered Aug 29, 2019 at 18:14

HellaDev

4082 gold badges9 silver badges24 bronze badges

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

Comments

Rikin · Accepted Answer · 2019-08-29 18:24:41Z

1

You forgot to call it! and In the map since you are using {} you need explicit return statement

  {showLicenseText()}

Also I would modify a little like below:

define function outside of render

showLicenseText = (licenseTextRef) => {
 return licenseTextRef.map(text => {
      return <tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>
  })
}

==============================

  {this.showLicenseText(licenseText)}

edited Aug 29, 2019 at 18:24

answered Aug 29, 2019 at 17:49

Rikin

5,4842 gold badges17 silver badges22 bronze badges

6 Comments

Rikin Over a year ago

@Ackman do you get any errors? Do you have showLicenseText defined in your render() function?

Ackman Over a year ago

yes that might be the case. It is defined inside. should I move it out?

Ackman Over a year ago

Did it and did not help. still nothing.

Rikin Over a year ago

If you move it out then you would have to reference it with this.

Rikin Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

render table row from array: react

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related