How to generate components based on data received via ajax?

Question

React

import React from 'react'

fetch("http://api.kai-zer.ru/dev/method/products.getAll")
.then((res) => res.json())
.then((data) => {
  const items = data.response.items;
  const Image = (namber) => {
    return (
      <div>
        {items[namber].image.url}
      </div>
      )
    }
})

export default Image

How can I do something like this?

Answer 1

const Image = ({ url }) => (
  <div>
    <img src={url} />
  </div>
);

class App extends React.Component {
  state = {
    items: [],
  }

  componentDidMount() {
    fetch('https://api.kai-zer.ru/dev/method/products.getAll')
      .then(r => r.json())
      .then(r => {
        this.setState({
          items: r.response.items,
        });
      });
  }

  render() {
    return (
      <div>
        {this.state.items.map(n => <Image {...n.image} />)}
      </div>
    );
  }
}