Micro-frontends in practice - communication between services via custom DOM events - publish

artists_list_item.js

// ...
class ArtistsListItem extends React.Component {
  onClick = (e) => {
    //...
    window.dispatchEvent(
      new CustomEvent(ARTISTS_SELECT_ARTIST, { detail: { artist: name } })
    );
  }
  render() {
    // ...
    return (
      <button onClick={this.onClick}>{name}</button>
    );
  }
}
// ...