0xD34F

const arr = useMemo(() => {
  const multiple = [ 'Format', 'Stars' ];
  return str
    .split('\n\n')
    .map(n => n
      .split('\n')
      .reduce((acc, m) => (
        m = m.split(/(?<=^[^:]+): /),
        acc[m[0]] = multiple.includes(m[0]) ? m[1].split(', ') : m[1],
        acc
      ), {}));
}, [ str ]);

<ul>
  {arr.map(n => (
    <li>
      <h3>{n.Title}</h3>
      <div>Year: {n['Release Year']}</div>
      <div>Format: <ul>{n.Format.map(m => <li>{m}</li>)}</ul></div>
      <div>Stars: <ul>{n.Stars.map(m => <li>{m}</li>)}</ul></div>
    </li>
  ))}
</ul>

https://jsfiddle.net/s7thmcn8/

onMarkerMouseOver() {
  this.openPopup();
}

<Marker onMouseOver={this.onMarkerMouseOver}>

https://jsfiddle.net/2vox61wf/

Обновляете стейт дочернего компонента вместо родительского.

Надо перенести метод handleInput в родительский компонент и передавать в дочерний:

<Input handleInput={this.handleInput} />

В дочернем, соответственно, доставать его не непосредственно из текущего экземпляра, а из props:

onChange={this.props.handleInput}

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>