lnked

Можно так

Попробуйте fullcalendar git

мне кажется вы имеете ввиду возможность react dev tools включается так - https://monosnap.com/file/zJd5vuToWPfD4Y2xKr45JRcl...

...
state = {
    json: [],
}
...
componentDidMount() {
    fetch('https://site.com/data.json')
        .then(response => response.json())
        .then(json => this.setState({ json }));
}
...
render() {
    const { json } = this.state;

    return (
        {json.map(({ id, link })) => (
            <div>
                <span>{id}</span>
                <span>{link}</span>
            </div>
        )}
    )
}
...

У вас не может загрузиться картинка при такой логике ни как, так как у вас isLoading false у вас не рендерится img и не вызывается onLoad

у вас в массиве дата который вы вставляете в state хранится объект

{
  actor: [ ... ],
  actress: [ ... ],
}

в зависимости от того что вы хотите вывести вам надо изменять код

Вот так можно вывести всех подряд, актеров и актрис

{[...data.actor, ...data.actress].map(item => (
    <tr key={item.name}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.film}</td>
    </tr>
))}

или еще проще что бы компонент таблицы был более универсальным передавать в него уже собранные данные

render(){
  const { actor, actress } = this.state.data

  return(
    <div>
      <Content data={[...actor, ...actress]} />
    </div>
  );
}

Почитайте про проверку типов

onItemHintClick = (index, e) =>
  this.setState(({ items }) => ({
    items: [
      ...items,
      [index]: {
        ...items[index],
        htogle: !items[index].htogle,
      },
    ],
  }));

class App extends React.Component {

  onTextClick = index => (e) => {
    ...
  }

  onHintClick = index => (e) => {
    ...
  }

  onExtaClick = index => (e) => {
    ...
  }

  render() {
    const items = [{}, {}];

    return (
      <ItemsList
        items={items}
        onTextClick={this.onTextClick}
        onHintClick={this.onHintClick}
        onExtaClick={this.onExtaClick}
      />
    )
  }
}

Item:

export default class Item extends React.Component {
  render() {
    const { item, index, onTextClick, onHintClick, onExtaClick } = this.props;

    return (
      <div className="item">
        <div className="item-over">...</div>
        <div className="item-main">
          <div className="item-text" onClick={onTextClick(index)} />
          <div className="item-hint"  onClick={onHintClick(index)} />
          <div className="item-extra" onClick={onExtraClick(index)} />
        </div>
      </div>
    );
  }
}

pickSize = size =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      size,
    }
  }))

pickColor = color =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      color,
    }
  }))

попробуйте так

button:disabled {
  pointer-events: none;
}

`componentDidMount ` срабатывает после `render`, вы можете показать прелоадер пока данные грузятся, после загрузки покажете данные

class example extends React.Component {
  state = {
    data: [],
    isLoading: true,
  }

  componentDidMount() {
    fetch('example/url')
      .then(response => response.json())
      .then(data => this.setState({ data }))
  }

  render() {
    const { isLoading } = this.state

    if (isLoading) {
      return <div>Загрузка</div>
    }

    return data.map(item => <div key={item.id}>{item.name}</div>)
  }
}