Как вывести все name из объектов в массиве (jsonplaceholder)?

Question

[Mykhailo]

Есть ссылка:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(json => console.log(json))

которая в консоль выводит 10 рандомн. юзеров с именами, емайл-ами и т.д.
Как вывести например имена name: "..." всех 10-ти user-ов?

Пока получилось вывести информацию только про первого юзера

import React, { Component } from 'react';
import './App.css';

function req1() {
  fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(json => {
      var name = json.name
      var body = json.username;
      var email = json.email;
      var website = json.website;
      document.getElementById("printUser").innerHTML = 
      '<td class="firstCol">1.</td>' + '<td>' + name + '</td>' 
      + '<td>' + body + '</td>' 
      + '<td>' + email + '</td>' 
      + '<td>' + website + '</td>';
      
    });
}

req1();


class App extends Component {
  render() {
    return(
      <div className="App">
      <table>
        <tbody>
          <th>json users</th>
          <tr id="printUser">
          </tr>
        </tbody>
      </table>
      </div>
    )
  }
}

export default App;

Answer 1

[0xD34F]

class App extends Component {
  state = {
    users: []
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return(
      <div className="App">
        <table>
          <tbody>
          {this.state.users.map(n => (
            <tr key={n.id}>
              <td>{n.name}</td>
              <td>{n.username}</td>
              <td>{n.email}</td>
              <td>{n.website}</td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    )
  }
}

Comments

[Mykhailo]

Спасибо!

Answer 2

[Антон Спирин]

Рекомендую прежде чем начинать что-либо писать, хорошо изучить возможности библиотеки или хотя бы прочитать Tutorial и разделы Main Concepts и Advanced Guides официальной документации.
То, что вы хотите реализовать правильно делается так.

Comments

[Mykhailo]

Согласен с вами, спасибо!