Антон Спирин

Вы не передаете в компонент props.

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component/>;  // тут ничего не передается
  }
  return this.context.router.history.push('/404');
}

так должно работать:

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component {...this.props} />;
  }
  return this.context.router.history.push('/404');
}

Как альтернативу HOC можно сделать обертку над Routе, применив композицию.

<AuthRoute path='/some_path' component={SomeComponent} />

Зачем вы используете context в компоненте дочернем router остается загадкой.

Используйте opacity, вместо display.

Например так.

1. Можно на белую, можно работать как ИП.
2. Реально. Где-то еще и премии платят. Многие компании оплачивают отпуск/больничный/выходные сотрудникам работающим через ИП.
3. Можно обсуждать задачи через Google Meet или в Slack. Код ревью.

Какие еще подводные камни могут быть у такой работы?

В нормальной компании никаких.

В верхней панели выбираем: Формат --> Конвертировать в простой текст

Либо перепишите Grid на forwardRef по аналогии с примером:

const Grid = React.forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

Либо исправьте:

export class MyComponent extends React.Component {
  render() {
    return (
      <Grid innerRef={this.props.forwardRef} />
    );
  }
}

и в компоненте Grid:

const Grid = props => (
  <div ref={props.innerRef}>{props.children}</div>
);

Если зададите название, которое уже есть, то переопределите существующее значение.

1. После срабатывания этой строки, пропадает слушатель:

table.innerHTML += `<tfoot><tr id="total-price"><td colspan="3">Total price: 
        ${shop.totalProductsPrice}</td></tr></tfoot>`;

Вызов table.innerHTML += some;, равносилен table.innerHTML = table.innerHTML + some;
- Сначала ваш html приводится к строке и складывается с новой строкой.
- Затем результат парсится и создаются новые элементы.
- Они добавляются в таблицу, на место старых.
- Слушателей на них естественно нет.
Из-за этой же строки возникает проблема 2. Так как, каждый раз добавляется новый футер, а удаляете вы только строки с классом .data.
3. Причина в вашем приведении строки к числу. Для пустой строки оно возвращает NaN. Выражение NaN === "" возвращает false.

Вы мутируете state:

this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:

this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:

const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

Почитайте о том, что такое передача по ссылке. Почитайте про иммутабельность.
И никогда больше не пишите ничего подобного:

this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.

Код особо не разбирал. Скажу лишь, что вам компонент лучше разбить на несколько:

render () {
  const { match: { url } } = this.props;
  return (
    <Switch>
      <Route exact path={url} content={Tweets} />
      <Route exact path={url + '/with-replies'} content={WithReplies} />
      <Route exact path={url + '/media'} content={Media} />
    </Switch>
  )
}

Вместо:

render() {
  return someCondition ? (
      <Component
        prop1={a.prop1}
        prop2={a.prop2}
        prop3={a.prop3}
        prop4={a.prop4}
        prop5={a.prop5}
      />
    ) : (
      <Component
        prop1={b.prop1}
        prop2={b.prop2}
        prop3={b.prop3}
        prop4={b.prop4}
        prop5={b.prop5}
      />
    );
}

Лучше:

render() {
  const c = someCondition ? a : b;

  return (
    <Component
      prop1={c.prop1}
      prop2={c.prop2}
      prop3={c.prop3}
      prop4={c.prop4}
      prop5={c.prop5}
    />
  );
}

Всместо :

render() {
  return (
    <Wrapper>
      {condition1 &&
         condition2 &&
         condition3 &&
         condition4 && (
           <Component />
       )}
    </Wrapper>
  )
}

Лучше:

render() {
  const shouldShowComponent = condition1 && condition2 && condition3 && condition4; 

  return (
    <Wrapper>
      {shouldShowComponent && <Component />}
    </Wrapper>
  );
}

Что за отступы display: inline-block?

Тыц

как по другому расположить элементы друг за другом горизонтально ?

Flexbox

Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.

Могу посоветовать конкретизировать поиск. Например:
react dashboard
react weather app
react reddit client
react youtube client
react tic tac toe
etc