使用 map 函数在 react 中渲染表体

Question

I am new to the react. Here I have a data that is in the array.Now I want to render that table data.using the map function, what I tried is ,

    <tbody>
                { this.props.jobList.length > 0 &&  this.props.jobList.content.map(function (item, key) {
                  return (
                    <tr key={key}>
                      <td>1</td>
                      <td>2</td>
                      <td>3</td>
                      <td>4</td>
                      <td>5</td>
                      <td>6</td>
                      <td>7</td>
                    </tr>
                  )
                })}
</tbody>

{
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null}]
}

Here, I do have data in the jobList but still it does not render that td content. Can any one explain me How can I do this? Or where I am doing wrong ?

Answer 1

You should map your array data ( this.props.jobList ) instead of object. render should be like this:

<tbody>
    {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
        return (
            <tr key={key}>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
        )
    })}
</tbody>

Answer 2

I think you should do like this:

var {jobList} = this.props;
var result = null;
if(jobList.length >0){
   result = jobList.map(value,key){
       return (
          <tr key={key}>
             <td>{value.content.id}</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
          </tr>
       );
   }
}
return (
    <tbody>
        {result}
    </tbody>
);

Answer 3

Based on your comments and the data that you provided, it seems that you need to render contents within jobList for which you need to make use of nested map like

<tbody>
    {this.props.jobList && this.props.jobList.length > 0 && this.props.jobList.map((item, key) => {
        return (
          <React.Fragment>
             {item.content.map(job => (
                  <tr key={job.id}>
                     <td>id: {job.id}</td>
                     <td>company: {job.company}</td>
                   </tr>
             ))}
          </React.Fragment>
        )
    })}
</tbody>

Answer 4

Here is a solution that I tested inside a class based component.

render()
{
    return(
        <tbody>
            {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
                    return(
                    <tr key={key}>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                    </tr>
                )

            })}


        </tbody>    
    
    )

}

Looks interesting too, especially for people just starting in react. Makes the organized syntax a bit more comprehensive.