0xD34F

Храните количество. При обновлении, если товар уже был добавлен - увеличиваете количество, если нет - добавляете с количеством, равным единице:

incrementCount = (id, name, price) => {
  this.setState(({ count }) => {
    const el = count.find(n => n.id === id);
    return {
      count: el
        ? count.map(n => n === el ? { ...n, count: n.count + 1 } : n)
        : [ ...count, { id, name, price, count: 1 } ]
    };
  });
}

Соответственно, при расчёте суммы надо будет добавить умножение цены на количество:

this.state.count.reduce((acc, n) => acc + n.price * n.count, 0)

Погуглите, что такое всплытие событий, и как его останавливать.

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

Может написать регулярку, которая будет убирать только первый и последнии слеши?

Зачем такие сложности? Вы знаете, что лишними в строке являются первый и последний символы - ну так может, их и отрезать? - типа, .slice(1, -1).

Ну и если вдруг объект regexp используется только для задания значений атрибута pattern, то пусть его свойства будут сразу строками, а не регулярными выражениями. И ещё, зачем делать его обычным полем класса? - так будет создаваться отдельный объект для каждого экземпляра. Пусть будет статическим или вообще не принадлежит классу.

Забыли:

ReactDOM.render(
  <News data={myNews} />,
  document.querySelector('#root')
);

{thematics.map((thematic, i, a) => (
  <div>
    <div style={style1} key={thematic.id}>
      {thematic.id}
    </div>

    {i < a.length - 1 ? <div style={style2} /> : null}
  </div>
))}

Выполняете setState до получения ответа (метод onSearchChange).

https://ru.reactjs.org/docs/faq-ajax.html#where-in...

Какой атрибут? Key? Нет такого атрибута у элемента, key для другого нужен.

Хотите знать id в обработчике клика - сделайте какой-нибудь другой атрибут, не key. Например:

data-id={user.id}

const elemId = +e.currentTarget.dataset.id;

И - иммутабельность:

this.setState(({ events }) => ({
  events: events.map(n => n.id === id ? { ...n, title: newTitle } : n),
}));

{this.state.image}

меняйте на

<img src={this.props.items[this.state.image].img} />

, а

<App />

на

<App items={items} />

UPD. https://jsfiddle.net/69f71jbk/

function App() {
  const [ values, setValues ] = useState(Array(10).fill(''));

  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = t.value;

    setValues(values.map((n, i) => i === index ? value : n));

    if (index < values.length - 1 && value) {
      inputRefs.current[index + 1].focus();
      inputRefs.current[index + 1].select();
    }
  };

  const inputRefs = useRef([]);

  return (
    <div>
      {values.map((n, i) => (
        <div>
          <input
            value={n}
            data-index={i}
            onChange={onChange}
            ref={input => inputRefs.current[i] = input}
            maxLength="1"
          />
        </div>
      ))}
    </div>
  );
}

state = {
  likes: localStorage.getItem('likes') | 0,
}

plus = () => {
  this.setState(({ likes }) => ({
    likes: likes + 1,
  }), () => localStorage.setItem('likes', this.state.likes));
}

this.setState(({ appData }) => ({
  appData: {
    ...appData,
    unfinished: {
      ...appData.unfinished,
      [name]: value,
    },
  },
}));

this.setState(({ books }) => ({
  books: [ ...books, ...newBooks ],
}));

const withWrapper = (ComponentToWrap) => (props) => {
  return <div className="Wrapper"><ComponentToWrap {...props} /></div>;
};

const WrappedMain = withWrapper(Main);

render() {
  return (
    <WrappedMain />
  );
}

xmlnsXlink="http://www.w3.org/1999/xlink"

return {
  arr: {

Если arr массив, почему пытаетесь превратить его в объект?

this.setState(({ arr }) => ({
  arr: arr.map((n, i) => i === posX
    ? n.map((m, j) => j === posY ? 1 : m)
    : n
  ),
}));

state: State<T> = {
  selectedItems: []
}

renderListItem: ({ item: T }) => T = ({ item }) => {
  return item;
}