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

Reputation: 11

How to render inside a loop inside a JSX?

I would like make this to work:

import React from 'react';

export default class HelloWorld extends React.Component {

    public render(): JSX.Element {
        let elements = {"0": "aaaaa"};
        return (
            <table>
                <thead>
                    <td>Elements</td>
                    <td>Contenu</td>
                </thead>
                <tbody>
                {Object.values(elements).map((element, index => {
                <span>
                    {element.value}
                </span>
                })}
                </tbody>
            </table>
        );
    }

}

I wanna have a render inside a object.entries loop inside a render

Upvotes: 0

Views: 84

Answers (3)

Iain J. Reid
Iain J. Reid

Reputation: 988

You'll want to map over the values of the Object elements, but drop the .value lookup on each element, as that will be undefined.

export default class HelloWorld extends React.Component {
  public render(): JSX.Element {
    let elements = {"0": "aaaaa"};
    return (
      <table>
        <thead>
          <td>Elements</td>
          <td>Contenu</td>
        </thead>
        <tbody>
        {Object.values(elements).map((element, index) => (
          <span>
            {element}
          </span>
        ))}
        </tbody>
      </table>
    );
  }
}

It's also worth point out that an Object isn't the best way to store a list of data, an Array would be much simpler. Like so:

export default class HelloWorld extends React.Component {
  public render(): JSX.Element {
    const elements = [
      'aaa',
      'bbb',
      'ccc'
    ];
    return (
      <table>
        <thead>
          <td>Elements</td>
          <td>Contenu</td>
        </thead>
        <tbody>
        {elements.map((element, index) => (
          <span>
            {element}
          </span>
        ))}
        </tbody>
      </table>
    );
  }
}

Upvotes: 0

Krzysztof Podmokły
Krzysztof Podmokły

Reputation: 866

export default class HelloWorld extends React.Component {
  public render(): JSX.Element {
    let elements = {"0": "aaaaa"};
    return (
      <table>
        <thead>
          <td>Elements</td>
          <td>Contenu</td>
        </thead>
        <tbody>
        {Object.values(elements).map((element, index) => {
          return <span>
            {element}
          </span>
        })}
        </tbody>
      </table>
    );
  }
}

In your solution you were missing end of parentheses in map and return also in map

Upvotes: 1

T.arar
T.arar

Reputation: 111

You can convert your object values to an array using Object.values(your_object) and then map throw the array via the map method.

Upvotes: 0

Related Questions