CODEWITHSUNDEEP
javascriptreactjstypescript
DispénNém
DispénNém

Reputation: 11

Nothing printed to the screen in the table tbody

import React from 'react';

export default class HelloWorld extends React.Component {

    public render(): JSX.Element {
        let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe\/Paris"},"url":"\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
        return (
            <table>
                <thead>
                <tr>
                    <th>Elements</th>
                    <th>Contenu</th>
                </tr>
                </thead>
                <tbody>
                {elements.map(element => {
                    <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                })}
                </tbody>
            </table>
        );
    }

}

Why nothing is printed inside the tbody of the table ? I don't know why I'm over it for 2 hours I want one tr per element and also in each tr have one td for element.id and one for element.url

Upvotes: 0

Views: 81

Answers (4)

Mohab Khaled
Mohab Khaled

Reputation: 167

first remove the JSX.Element from the render method as it's not needed if you've created your app with npm create, the main thing is that you need to return your table row inside map function(you only have one row at the moment).

    import React from 'react';

    export default class HelloWorld extends React.Component {

    render(){
        let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe\/Paris"},"url":"\/\/30osd.r.a.d.sendibm1.com\/mk\/mr\/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
        return (
            <table>
                <thead>
                <tr>
                    <th>Elements</th>
                    <th>Contenu</th>
                </tr>
                </thead>
                <tbody>
                {elements.map(element => {
                   return(
                   <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                    )
                })}
                </tbody>
            </table>
        );
    }

}

Upvotes: 0

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23170

Make sure you return the JSX elements in your array's .map(). You can use implicit or explicit return:

<tbody>
  {elements.map((element) => (
    <tr>
      <td>
        <p>{element.id}</p>
      </td>
      <td>
        <p>{element.url}</p>
      </td>
    </tr>
  ))}
</tbody>

Or:

<tbody>
  {elements.map((element) => {
    return (
      <tr>
        <td>
          <p>{element.id}</p>
        </td>
        <td>
          <p>{element.url}</p>
        </td>
      </tr>
    );
  })}
</tbody>

Upvotes: 0

rdevegili
rdevegili

Reputation: 11

Try wrapping your elements in parentheses.

An alternative to Sakshi's answer would be:

{
  elements.map((element) => (
    <tr>
      <td>
        <p>{element.id}</p>
      </td>
      <td>
        <p>{element.url}</p>
      </td>
    </tr>
  ));
}

Upvotes: 0

Sakshi
Sakshi

Reputation: 1548

Inside tbody it should be:

<tbody>
{elements.map(element => {
                    return <tr>
                        <td>
                            <p>{element.id}</p>
                        </td>
                        <td>
                            <p>{element.url}</p>
                        </td>
                    </tr>
                })}
  </tbody>

Upvotes: 1

Related Questions