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,
        "panyId": 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 ?

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,
        "panyId": 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 ?

• javascript
• reactjs
• redux

• jobList is an array or jobList.content? – Mayank Shukla Commented Jan 21, 2019 at 7:01
• jobList is an array and content is an object – ganesh kaspate Commented Jan 21, 2019 at 7:04
• You must map over jobList then, instead of jobList.content since map is defined on an array – Shubham Khatri Commented Jan 21, 2019 at 7:05
• Do parenthesis help? { (this.props.jobList.length > 0) && this.props.jobList.content.map(function – Dacre Denny Commented Jan 21, 2019 at 7:05
• If jobList is an array then map through it . Is jobList.content an array ? – Sahil Raj Thapa Commented Jan 21, 2019 at 7:05

4 Answers 4

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>

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>
);

Based on your ments 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>pany: {job.pany}</td>
                   </tr>
             ))}
          </React.Fragment>
        )
    })}
</tbody>

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

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 prehensive.