0xD34F

Вычисляемые имена свойств.

Этот метод стоит на событие onChange.

Сомнительное утверждение. "На событие" "стоит" не handleChange, а функция, которую он возвращает. По-видимому, необходимо единообразно обрабатывать события, возникающие в разных местах - единственные отличия, это имена обновляемых свойств, для каждого из которых создаётся собственный обработчик. Что, кстати, делать вовсе не обязательно - есть вариант прицепить значение type к элементу в виде data-атрибута, и тогда можно будет использовать общий обработчик:

handleChange = ({ target: { value, dataset: { type } } }) => {
  if (value.length <= limits.user.max) {
    this.setState({
      [type]: value,
    });
  }
}

<input onChange={this.handleChange} data-type="xxx">
<input onChange={this.handleChange} data-type="yyy">
<input onChange={this.handleChange} data-type="zzz">

Как это можно исправить?

Добавить exact - вижу, это вы и сами сообразили. Ещё можно изменить порядок роутов (рендерится первый подходящий):

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:user/:commit" component={CommitPage} />
  <Route path="/:user" component={UserPage} />
</Switch>

Что стоит изучить, чтоб разобраться в вопросе?

Документацию.

Но как мне их передать в дочку на отображение ?

<SearchHub error={error} isLoaded={isLoaded} items={items} />

Сама "дочка" будет выглядеть несколько иначе, чем у вас есть сейчас, как-то так:

class SearchHub extends Component {
  render(){
    const { error, isLoaded, items } = this.props;

    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <Loader type="big" active> </Loader>;
    } else {
      return (
        <div className={styles.parent}>
          <div>
            {items.map(item => (
              <Gapped gap={20} key={item.name}>
                <span><b>{item.rating.totalLove}</b></span>
                <span><img src={shape} alt="heart"/></span>
                <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
                <span>{item.name}<br/>{item.role}</span>
              </Gapped>
            ))}
          </div>
        </div>
      );
    }
  }
}

Ещё у вас косяк при получении данных - перед запросом надо бы выставлять isLoaded: false и сбрасывать значение error, а иначе не будет видно индикатора загрузки, и после первой же ошибки невозможно больше будет увидеть никаких данных.

renderCrypto(obj) {
  const percent = obj.percent_change_24h;
  const color = percent < 0 ? 'red' : 'rgb(2, 214, 19)';

  return (
    <div className='col-md-3'>
      <button type="button" className="btn btn-light">
        <a style={{ color }}>({ percent })%</a>
      </button>
    </div>
  );
}

Object.entries(obj).map(([ key, val ]) => (
  <BlockItemComp
    name={key}
    val={val}
  />
))

При получении данных запоминаете список уникальных значений params, строите по ним выпадающий список, при выборе элемента списка запоминаете выбранное в массив selectedParams, при составлении filteredStudios проверяете, чтобы все params студии были в selectedParams, как-то так.

Вызов setState пусть будет один, а при вычислении минимума и максимума обращайтесь не к стейту, а к только что полученным данным. Т.е., вместо

this.setState({ studios: res.data, isLoading: false })
this.setState({ max: this.state.studios.reduce((l, e) => (e.price > l.price ? e : l)) });
this.setState({ min: this.state.studios.reduce((l, e) => (e.price < l.price ? e : l)) });

пусть будет

this.setState({
  studios: res.data,
  isLoading: false,
  max: res.data.reduce((l, e) => (e.price > l ? e.price : l), -Infinity),
  min: res.data.reduce((l, e) => (e.price < l ? e.price : l), Infinity),
});

// или, без reduce'ов

const prices = res.data.map(n => n.price);

this.setState({
  studios: res.data,
  isLoading: false,
  max: Math.max(...prices),
  min: Math.min(...prices),
});

render() {
  const [ post ] = this.state.data || [];

  return (
    <div>
      <h4>App component</h4>
      {post ? post.title : 'пока ничего не загрузилось'}
    </div>
  );
}

Список постов - это db, да? Ну так и фильтруйте его перед передачей в Posts. Например, так:

render() {
  const
    text = this.state.filterText,
    posts = text ? db.filter(n => n.descr.includes(text)) : db;

  return(
    <div className="App">
      <Nav/>
      <Header/>
      <SearchBar
        filterText={this.state.filterText}
        onUserInput={this.handleUserInput}
      />
      <Posts handleUserIput={this.state.filterText} data={posts}/>
      <Footer/>
    </div>
  );
}

Я реализовал примерно по документации, но...

А точно по документации вместо примерно не пробовали? - ну там, у {{postImage}} по фигурной скобке с обоих концов убрать, например.

return state["users"].entities.forEach(user => {
  if (user.email === state["auth"].user.email) {
    return user;
  }
});

Серьёзно? А вы в курсе, что forEach возвращает undefined? Наверное, стоит использовать find:

return state.users.entities.find(user => user.email === state.auth.user.email);

Пытаетесь выводить OrderedMap вместо нативного js-объекта. Надо бы преобразовать - для этого есть метод toJS:

renderContent = (arr, id) => {
  return Object.values(arr.delete(id).map(item => <li key={item.id}>{item.name}</li>).toJS())
}

i.includes(["качель","окно"])

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

[ 'качель', 'окно' ].includes(i)

Во-вторых, почему этот массив зашит внутрь функции? Пусть передаётся извне, сделайте его prop'ом компонента - будет доступен через второй параметр mapStateToProps:

const mapStateToProps = ({ list }, { params }) => ({
  list: list.filter(n => n.params.some(m => params.includes(m))),
});

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

const result = [...Array(5)].map(() => <p>hello, world!!</p>);

https://jsfiddle.net/kng72um9/

Нужно вывести это все в сетку по 4 элемента в строке <...> Не понятно как перебирая массив делать строки

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

const { items } = this.state;
const inRow = 4;
const rows = Array.from(
  { length: Math.ceil(items.length / 4) },
  (n, i) => items.slice(i * 4, (i + 1) * 4)
);

И вместо исходного массива при рендеринге перебираете полученные куски:

{rows.map(n => (
  <div className="row">
    {n.map(m => <div>{m}</div>)}
  </div>
))}

https://jsfiddle.net/cmd7fyn3/

У меня получается создать коллекцию, но Ymaps и Map не имеют метода setBounds (выводил в console.log(ymaps) и console.log(map)).

В это я поверить не могу. Метод setBounds у map всё-таки есть - просто если метод не собственный, а принадлежит прототипу, то в консоли он не показывается.

"Рендерить его по другому" - подход неверный.

Надо разделять предустановленные значения, и те, что вводит пользователь. Так что просто числа хранить уже не получится - наверное, стоит сделать объект, который содержит в себе значение ячейки и её disabled. Как-то так.

Пытался нагуглить, но самостоятельно разобраться в простыне кода не могу.

Что-то вы странное нагуглили - на всё про всё строчек десять, никакой "простыни".

Вычисляете координаты начала текущего блока, затем обходите его (два цикла, один вложен в другой, от начальных координат до начальных + 3). Типа так.

handleTdClick(item) {

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

Вместо значения нужны его индексы:

{this.state.rows.map((row, rowIndex) => (
  <tr>
    {row.map((item, colIndex) => (
      <td
        onClick={this.onTdClick}
        data-row={rowIndex}
        data-col={colIndex}
        className={item ? 'not-empty' : 'empty'}
      >
        {item}
      </td>
    ))}
  </tr>
))}

onTdClick = ({ target: { dataset: d } }) => {
  const row = +d.row;
  const col = +d.col;

  this.setState(({ rows }) => ({
    rows: rows.map((n, i) =>
      i === row
        ? n.map((m, j) => j === col ? +!m : m)
        : n
    )
  }));
}

Вы возвращаете тот же самый массив cards (и тот же самый элемент cards, и то же самое свойство entries обновляемого элемента cards), что и был, поэтому изменений как бы и не было. Делайте копии:

const addEntry = (state, action) => {
  const cards = [...state.cards];
  const index = cards.findIndex(n => n.id === action.id);
  const card = {...cards[index]};
  card.entries = [ ...card.entries, { id: Math.random().toString(36).substring(7) } ];
  cards[index] = card;
  return { cards };
};

Кстати, я правильно понимаю, что

const addEntry = (state, action) => {

- это не весь редьюсер, а эта функция вызывается внутри редьюсера? Как-то так, да?