CODEWITHSUNDEEP
javascriptreactjs
Michael93
Michael93

Reputation: 129

Why is the table data not being rendered?

Only the table header row is being rendered to the webpage. The row[value] data inside the <td> tags is not being rendered even though it is being correctly logged to the console. What should I do differently?

I have tried abstracting the code within tbody into a function and then calling that function within tbody but that does not render the data either.

tableHeader = () => {
  let arr = [];
  let row = this.props.sales[0];
  for (var key in row) {
    arr.push(key);
  }
  return arr;
};

render() {
  return (
    <div className="sales-leader-board">
      <table className="table table-striped">
        <thead>
          <tr bgcolor="lightblue">
            {this.tableHeader().map((name, key) => (
              <th scope="col" className="align-middle" key={name}>
                {name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {this.props.sales.map((row, row_key) => {
            <tr key={`row-${row_key}`}>
              {this.tableHeader().map((value, key) => {
                <td
                  scope="col"
                  className="align-
                              middle"
                  key={`data-${key}`}
                >
                  {row[value]}
                </td>;
                console.log('row[value]', row[value]);
              })}
            </tr>;
          })}
        </tbody>
      </table>
    </div>
  );
}

I have no error messages.

Upvotes: 1

Views: 65

Answers (2)

Nagesh
Nagesh

Reputation: 437

Whenever you use the map() inside the render(), so in your code, you need to return the JSX inside that map(). In the <thead> you have wrapped the JSX inside map() with round brackets, but in <tbody>, you have used the curly brackets which indicates the expression which needs to be returned. Please try to return the JSX like below.

<tbody>
    {this.props.sales.map((row, row_key) => {
        return (<tr key={`row-${row_key}`}>
            {this.tableHeader().map((value, key) => 
              {
                 return (<td scope="col" className="align- 
                     middle" key={`data-${key}`}> 
                     {row[value]}</td>)
               })}
          </tr>)
     })}
<tbody>

Upvotes: 0

Galupuf
Galupuf

Reputation: 2957

You're just missing the return statements :) You have to return something from map to render to the dom.

<tbody>
  {
    this.props.sales.map((row, row_key) => {
      return (
        <tr key={`row-${row_key}`}>
          {this.tableHeader().map((value, key) => {
            return (
              <td scope="col" className="align- middle" key={`data-${key}`}> 
                {row[value]}
               </td>
            );
          })}
      </tr>);
    })
  }
</tbody>

Alternatively, as you did for your thead you can parenthesize the body of your arrow function in order to omit the return statement.

Upvotes: 1

Related Questions