0xD34F

case 'BASKET':
  return {
    ...state,
    products: state.products.map(n => n.name === action.payload
      ? { ...n, basket: true }
      : n
    ),
  };

UPD. Ну это уже ни в какие ворота:

onPress={() => this.props.addToBasket.bind(this, this.props.product.name)}

Во-первых, функцию создаёте, но не вызываете. Во-вторых, не нужна тут привязка контекста:

onPress={() => this.props.addToBasket(this.props.product.name)}

const showProductsList = (type, maxlength) => {
    <...>
    if(product.basket == type & currentLength < maxlength) {

showProductsList("true", 4)

Нет, true не будет равно "true", убираем кавычки: showProductsList(true, 4).

Может, прежде чем браться за react, стоит язык освоить, хотя бы основы?

Храните значения count отдельно в каждом экземпляре Child.

Или все вместе в Parent, и передавайте их в Child вместе с функцией, которая будет устанавливать новое значение.

А что делают методы sortByPrices и sortByDuration? Дайте-ка попробую угадать - принимают в качестве параметра массив, и его же сортируют. Если так, то ответ на вопрос "куда копать" очевиден - копайте основы js, какие бывают типы данных, в чём их особенности. Массивы являются объектами, а объекты при присваивании / передаче в функцию / возврате из функции не копируются, копируются ссылки на них. То есть, несколько раз сортируется один и тот же массив - естественно, что при выводе всегда будет отображаться результат последней сортировки. Делайте копии массива, сортируйте копии, передавайте эти копии в экземпляры TicketsList, типа tickets={sortByPrices([...visibleData])}.

class App extends React.Component {
  state = { 
    isTimerActive: false,
  }

  setTimerActive = isTimerActive => {
    this.setState(() => ({ isTimerActive }));
  }

  onClick = () => {
    this.setTimerActive(true);
    setTimeout(this.setTimerActive, 60000, false);
  }

  render() {
    const { isTimerActive } = this.state;

    return(
      <button disabled={isTimerActive} onClick={this.onClick}>
        {isTimerActive ? 'отправлено' : 'отправить повторно'}
      </button>
    );
  }
}

onKeyDown = ({ key }) => {
  this.setState(() => ({
    keyDown: key,
  }));
}

componentDidMount() {
  document.addEventListener('keydown', this.onKeyDown);
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.onKeyDown);
}

Рекурсивный компонент. Если есть children с ненулевой длиной - создаёт экземпляр самого себя:

{reviews.map(n => (
  ...
  {Array.isArray(n.children) && n.children.length ? <Reviews reviews={n.children} /> : null}
  ...
))}

https://reactcommunity.org/react-transition-group/

.container {
  background: #224B7A;
}

.container.active {
  background: #fff;
}

state = {
  active: false,
}

toggleActive = ({ type }) => {
  this.setState(() => ({
    active: type === 'focus',
  }));
}

<div className={`container ${this.state.active ? 'active' : ''}`}>
  ...
  <input onFocus={this.toggleActive} onBlur={this.toggleActive} />

Запрос данных асинхронен, так что рендеринг с lists равным null будет выполнен в любом случае. И вот там, где вы пытаетесь lists перебирать, проверяйте, что он не null - тогда вызывать map можно. Или устанавливайте в качестве дефолтного значения вместо null пустой массив.

Используйте компонент VictoryAxis и стилизуйте его:

<VictoryChart>
  <VictoryAxis
    style={{
      axis: {
        stroke: 'здесь ваш цвет',
      },
    }}
  />
</VictoryChart>

let data = {};

await fetch(url).then((res) => res.json()).then(json => {
    data = { temperature: json.main.temp }
})
return data;

Это что за дичь? Пусть будет return fetch(url).then(r => r.json());.

this.setState(() => {
    return { weather: this.askForWeather.getNeededData() }
});

Засовываете промис в стейт. Что-то сомневаюсь, что так и было задумано. Меняйте на

this.askForWeather.getNeededData().then(weather => {
  this.setState(() => ({ weather }));
});

<Main temperature={this.state.weather.temperature}/>

Пока weather имеет значение null, попытки прочитать свойства будут приводить к ошибке. Так что

{this.state.weather && <Main temperature={this.state.weather.main.temp} />}

Потому что count, к которому вы добавляете единицу - это тот, который был при первом рендеринге компонента. Нужен доступ к актуальному - вместо числа передавайте в setCount функцию: setCount(count => count + 1);.

что я делаю не так?

Одно из двух: не читаете документацию, или взялись за react не зная языка.

Если отвечать на вопрос из заголовка - надо target заменить на currentTarget.

Но можно ответить и на тот, что в основном тексте:

что я сделал не так?

Почему у вас внутри ul находятся i и div? Почему li находится внутри div? Разберитесь, кого чьим контентом можно и нельзя делать.

Стучаться напрямую к элементам не надо: значение #hide должно браться из стейта, обновлять надо стейт; innerText, который вы хотите получить - его также надо брать из стейта.

Метод selectItem - подумайте, как его переписать так, чтобы вместо объекта события (который вам нужен ради свойства target, да?) он принимал данные, на основе которых создан li.

<Placemark
  options={{
    iconLayout: 'default#image',
    iconImageHref: 'здесь путь к вашей картинке',
  }}
/>

https://codesandbox.io/s/polished-rgb-m430d?file=/...

Заворачиваете div с числом в отдельный экземпляр Spring, которому задаёте в качестве key само число:

<Spring
  key={this.state.number}
  from={{ opacity: 0, marginTop: 50 }}
  to={{ opacity: 1, marginTop: 0 }}
>
  {({ opacity, marginTop }) => (
    <div style={{ opacity, marginTop }}>{this.state.number}</div>
  )}
</Spring>

this.deleteItem = this.addItem.bind(this)

Так add или delete? Вы уж определитесь.

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

class App extends React.Component {
  addItem = e => {
    ...
  }

  deleteItem = key => {
    ...
  }
  ...

{this.state.card.map(id => (
  <Link to={`/api/events/${id}`}>
    <Main number={id} />
  </Link>
))}
<Switch>
  <Route
    path="/api/events/:id"
    render={props => <Description number={props.match.params.id} />}
  />
</Switch>

onChange = ({ target: { value, dataset: { objName, key } } }) => {
  this.setState(({ [objName]: obj }) => ({
    [objName]: {
      ...obj,
      [key]: value,
    },
  }));
}

<input data-obj-name="fr" data-key="name" value={this.state.fr.name} onChange={this.onChange} />
<input data-obj-name="en" data-key="title" value={this.state.en.title} onChange={this.onChange} />

Получаете случайное значение с помощью Math.random, в зависимости от того, ниже ли оно вашей вероятности, берёте одно или другое значение:

class App extends React.Component {
  state = {
    cells: Array(16).fill(null),
    probability: 0.7,
  }

  onClick = e => {
    const index = +e.target.dataset.index;
    this.setState(({ cells, probability }) => ({
      cells: cells.map((n, i) => i === index && !n
        ? (Math.random() < probability ? 'black' : 'red')
        : n
      ),
    }));
  }

  render() {
    return (
      <div className="ColorS">
        {this.state.cells.map((n, i) => (
          <div
            className="ColorS-grid"
            style={n && { background: n }}
            data-index={i}
            onClick={this.onClick}
          />
        ))}
      </div>
    );
  }
}