Возврат html из fetch() и показ пользователю

React очень сильно зависит от состояние и реквизит — либо реквизиты прошедший для компонента, либо внутреннее состояние поддерживается на единицу. В вашем примере, не зная подробностей, похоже, что единственным вариантом здесь будет использование состояние компонента. Это означает, что вы не можете использовать компонент без состояния, как минимум, вы будете смотреть на PureComponent или Component, т.е.

import React, { PureComponent } from 'react';

class Related extends PureComponent {
  state = {
    artists: null,
    error: null
  }

  constructor(props) {
    this.super();
    this.url = `/artist/${props.artistId}/related`;
  }

  getRelatedArtists = async () => {
    try {
      const res = await fetch(this.url);
      const json = await res.json();
      this.setState({ artists: json.data, error: null });
    } catch(e) {
      console.error(e);
      this.setState({ error: 'Unable to fetch artists' });
    }
  }

  renderError() {
    if (!this.state.error) return null;

    return (
      <span className = "error">{this.state.error}</span>
    )
  }

  renderArtistList() {
    if (!this.state.artists) return null;

    return this.state.artists.map((x,i) => (
      <div key = {i}>
        <p>Name: ${x.name}</p>
        <p>Fans: ${x.nb_fans}</p>
        <img src=${x.picture} alt=${name} />
      </div>
    ));
  }

  render() {
    return (
      <div>
        <p>Related artists</p>
        <button onClick = {this.getRelatedArtists}>get</button> {this.renderError()}
        {this.renderArtistList()}
      </div>
    );
  }
}

Если вы используете React 16.x, вам, возможно, следует подумать об использовании Хуки. Вот как это будет выглядеть как функциональный компонент

import React, { useState, useCallback } from 'react';

function Related(props) {
  // setup state
  const [artists, setArtists] = useState(null);
  const [error, setError] = useState(null);
  // setup click handler
  const getRelatedArtists = useCallback(async () => {
   try {
      // fetch data from API
      const res = await fetch(`/artist/${props.artistId}/related`);
      const json = await res.json();
      // set state
      setArtists(json.data);
      setError(null);
    } catch(e) {
      console.error(e);
      setError('Unable to fetch artists');
    }
  }, [props.artistId]);
  // setup render helper
  function renderArtist(artist, key) {
    return (
      <div key = {key}>
        <p>Name: ${artist.name}</p>
        <p>Fans: ${artist.nb_fans}</p>
        <img src=${artist.picture} alt=${artist.name} />
      </div>
    );
  }
  // render component
  return (
    <div>
      <p>Related artists</p>
      <button onClick = {getRelatedArtists}>get</button> {error}
      {artists && artists.map(renderArtist)}
    </div>
  )
}

при использовании реакции, поэтому вам нужно использовать преимущества, которые предоставляет вам реакция, вы должны разделить свой код и сделать его пригодным для повторного использования.

во-вторых: для получения всего нескольких чисел из связанных сообщений из большого массива вам не нужно делать цикл, вы можете просто объявить переменную и сохранить в ней количество сообщений, которые вам нужно сохранить в ней

import React, {Component} from 'react';
import Post from './post/post'

class RelatedPosts extends Component{
    state = {
        realted: [],
    }
    componentDidMount(){
        const url = `/artist/${props.artistId}/related`;
        fetch(url)
            .then(response=>{
                const relatedPosts = response.data.slice(0 ,4),
                    latestRelatedPosts = relatedPosts.map(post=>{
                        return {
                            post
                        }
                    })
                ;
                this.setState({
                    realted: latestRelatedPosts
                });
            }).catch(error=>{
                console.info(error)
            })
    }
    render() {
        let relatedPosts = this.state.realted.map(realtedPost=>{
            return (
                <Post post = {realtedPost}/>
            );
        });
        return (
            <section className = "Posts">
                <p>Related artists</p>
                {relatedPosts}
            </section>
        );
    }
}
export default RelatedPosts;

здесь я создал запрос в componentDidMount Lifecycle, потому что он вызывается сразу после того, как компонент вставлен в дерево, и вы можете найти дополнительную информацию здесь

и здесь я создам новый компонент, чтобы упростить код для обслуживания позже, если вы захотите что-то изменить позже, и я передам ему данные, которые приходят из ответа на мой запрос

import React from 'react';
const post = (props) => (
    <article className = "relatedPost">
        <h1>Name: {props.post.Name}</h1>
        <h1>Fans: {props.post.numFans}</h1>
        <img src = {img} alt = {name} />
    </article>
);
export default post