Как отрендерить json в React?

Question

[lolik20]

Как это отрендерить?

[{"title":"Lokomotiv","country":"Russia","playerDTO":[{"id":1,"name":"Krivo","surName":"Ruki","gender":"female","bornDate":"1999-10-10T00:00:00"}]}]

Пытался так

import React, { Component } from 'react';

export class AllPlayers extends Component {
  
  constructor(props) {
    super(props);
    this.state = { forecasts: [], loading: true };
  }

  componentDidMount() {
    this.populateWeatherData();
  }

  static renderForecastsTable(forecasts) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
          </tr>
        </thead>
        <tbody>
          {forecasts.map(forecast =>
            <tr key={forecast.id}>
              <td>{forecast.name}</td>
              <td>{forecast.surname}</td>
              <td>{forecast.gender}</td>
              <td>{forecast.bornDate}</td>
              <td>{forecast.title}</td>
              <td>{forecast.country}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      :AllPlayers.renderForecastsTable(this.state.forecasts);

    return (
      <div>
        <h1 id="tabelLabel" >Weather forecast</h1>
        <p>This component demonstrates fetching data from the server.</p>
        {contents}
      </div>
    );
  }

  async populateWeatherData() {
    const response = await fetch('api/team/all');
    const data = await response.json();
    this.setState({ forecasts: data, loading: false });
  }
}

Comments

[n1ksON]

Вы json в объект то переведите JSON.parse()

[strelok011]

Вообще - работая с данными и натыкаясь на "непреодолимые преграды" обкладывайте каждый шаг console.log()
Так вы будете понимать что к вам пришло, в каком виде и почему не срабатывает map от строки :)