0xD34F

Пусть валидатор возвращает true/false вместо корректное_значение/false:

const validator = (value, maxSize) =>
  !(/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize);

Соответственно, setTitle вызывайте только в случае true:

if (validator(value, maxSize)) {
  setTitle(value);
}

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

const validator = (defaultValue, value, maxSize) =>
  (/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize)
    ? defaultValue
    : value;

setTitle(prevValue => validator(prevValue, value, maxSize));

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

// ...прилегают к первой кнопке
const showAfterFirst = currentPage < 5;

// ...прилегают к последней кнопке
const showBeforeLast = currentPage > totalPages - 4;

Соответственно, условиями отображения троеточий после/до первой/последней кнопок будут обратные значения: !showAfterFirst и !showBeforeLast. А чтобы отобразить центральную группу кнопок, оба базовых условия должны быть ложными: !(showAfterFirst || showBeforeLast).

https://jsfiddle.net/0sjgrcxu/1/

Добавьте в useEffect return () => clearInterval(interval);.

<GoogleMapReact draggable={false}>

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

function App() {
  const [ count, setCount ] = useState(0);
  const onChange = e => setCount(Math.max(0, e.target.value | 0));

  return (
    <div>
      <input type="number" value={count} onChange={onChange} />
      <div className="container">
        {Array.from(Array(count).keys(), n => <div className="item">{n}</div>)}
      </div>
    </div>
  );
}

https://jsfiddle.net/08yjdfrw/

const rootEl = useRef(null);

useEffect(() => {
  const onClick = e => rootEl.current.contains(e.target) || console.log('клик вне компонента');
  document.addEventListener('click', onClick);
  return () => document.removeEventListener('click', onClick);
}, []);

return (
  <div ref={rootEl}>
    ...
  </div>
);

nextSlide = ({ target: { dataset: { step } } }) => {
  this.setState(({ images: { length }, currentImageIndex: i }) => ({
    currentImageIndex: Math.max(0, Math.min(length - this.props.slidesToShow, i + +step)),
  }));
};

<button onClick={this.nextSlide} data-step="-1">PREV</button>
<button onClick={this.nextSlide} data-step="+2">NEXT</button>

function App(props) {
  const [ items, setItems ] = React.useState([...props.items]);
  const [ name, setName ] = React.useState('');

  const add = () => setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      name,
    },
  ]);

  return (
    <div>
      <div>
        <input onChange={e => setName(e.target.value)} />
        <button onClick={add}>add</button>
      </div>
      {items.map(n => (
        <div key={n.id}>
          {Object.entries(n).map(([ k, v ]) => <div>{k}: {v}</div>)}
        </div>
      ))}
    </div>
  );
}

Можно dangerouslySetInnerHTML использовать. Например.

Но вообще, это тут не обязательно.

BrowserRouter в PageHeader - убрать.

Возможные типы сложить в массив:

const types = [ 'text', 'password', 'number' ];

Завести стейт под текущий тип:

const [ type, setType ] = useState('text');

<input type={type} />

Обновлять его при взаимодействии с элементами управления:

const onTypeChange = e => setType(e.target.value);

Которые могут быть обычными кнопками:

{types.map(n => (
  <input
    type="button"
    value={n}
    className={n === type ? 'active' : ''}
    onClick={onTypeChange}
  />
))}

Или радио:

{types.map(n => (
  <label>
    <input
      type="radio"
      value={n}
      checked={n === type}
      onChange={onTypeChange}
    />
    {n}
  </label>
))}

Или это может быть select:

<select value={type} onChange={onTypeChange}>
  {types.map(n => <option>{n}</option>)}
</select>

А ещё можно сделать кнопку, которая будет по кругу переключать типы:

<button onClick={() => setType(types[(types.indexOf(type) + 1) % types.length])}>
  next type
</button>

https://jsfiddle.net/y7r8xv9b/

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

https://jsfiddle.net/oLce047k/

Если говорить именно об уникализации массива, то

const uniqueWithCount = (arr, idKey, countKey) =>
  Object.values(arr.reduce((acc, n) => (
    (acc[n[idKey]] ??= { ...n, [countKey]: 0 })[countKey]++,
    acc
  ), {}));


const result = uniqueWithCount(arr, 'name', 'qty');

Но вообще-то, в корзине элементы должны быть уникальны изначально, надо в момент добавления проверять наличие элемента, если есть - увеличивать его счётчик, нет - добавить со счётчиком, имеющим единицу в качестве значения. Как это может выглядеть:

const addToCart = product =>
  setCart(cart => cart.some(n => n.id === product.id)
    ? cart.map(n => n.id === product.id ? { ...n, qty: n.qty + 1 } : n)
    : [ ...cart, { ...product, qty: 1 } ]
  );

https://jsfiddle.net/6etkvyr9/

React.Fragment

taskList.map(function(item) {
  return (
    <Task data_text={item.text} key={item.id} delete={this.deleteTaskHandler}/>
  )
})

Теряется контекст, соответственно, this.deleteTaskHandler - это не метод компонента.

onCLick={this.props.deleteTaskHandler()}

Опечатка в имени обработчика события.

Почему deleteTaskHandler, если передаёте в экземпляр компонента delete?

А вызывать вы его зачем пытаетесь (не понимаете разницы между функцией и результатом её вызова?)?

Теряете значение, которое возвращает setInterval. Нужен ещё один useState.

При обновлении numbers внутри addRandomNumber используете значение, которое было на момент создания addRandomNumber. Функции обновления состояния вместо нового значения можно передать функцию - она получает в качестве аргумента текущее значение и должна вернуть новое.

function App() {
  const [ numbers, setNumbers ] = React.useState([ 1, 2, 3 ]);
  const [ timerId, setTimerId ] = React.useState(null);

  const add = () => setNumbers(numbers => [ ...numbers, Math.random() * 10 | 0 ]);
  const start = () => setTimerId(setInterval(add, 1000));
  const stop = () => (clearInterval(timerId), setTimerId(null));

  return (
    <div>
      <ul>
        {numbers.map(n => <li>{n}</li>)}
      </ul>
      <div>
        <button onClick={add} disabled={timerId}>Добавить число</button>
        <button onClick={start} disabled={timerId}>Старт</button>
        <button onClick={stop} disabled={!timerId}>Стоп</button>
      </div>
    </div>
  );
}

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}