0xD34F

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

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

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

На офф сайте читал и мануалы и практическое руководство, тяжело очень дается и порой не понтно что к чему и зачем.

Значит, рано за react взялись. Это ОЧЕНЬ простая вещь - конечно, для тех, кто готов её осваивать.

фразы оттуда навроде "Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов." лишь отпугивают новичков вроде меня

Вот это хорошо. Новичкам react ни к чему.

C javascript знаком на базовом уровне

Этого мало.

Вопрос бессмысленный, данные есть.

fetch('https://jsonplaceholder.typicode.com/todos/1')

Указывая id, вы получаете один объект. Объект, а не массив. Уберите 1.

const [data, setData] = useState(null);

{data.map(item => (

Бывает ли у null метод map? - погуглите, разберитесь. Ну и замените null на [].

https://jsfiddle.net/tjcaxn58/1/

Сложить допустимые значения второго инпута в массив:

const values = [ 2, 3, 5, 7, 11, 13, 17, 19, ... ];

Сделать эффект, зависящий от обоих значений, где второе будет исправляться. Берёте ту половину допустимых значений второго инпута, которая соответствует текущему значению первого инпута, ищите в ней ближайшее к текущему второму:

useEffect(() => {
  const index = values.indexOf(граничное_значение_второго_инпута);

  setVal2(values
    .slice(...(val1 > граничное_значение_первого_инпута ? [ index ] : [ 0, index ]))
    .reduce((val, n) => Math.abs(val - val2) < Math.abs(n - val2) ? val : n)
  );
}, [ val1, val2 ]);

https://jsfiddle.net/recx8j6w/

Взять максимальный из существующих, добавить единицу:

1 + Math.max(0, ...articles.map(n => n.id))

Или сделать функцию, которая будет возвращать +1 относительно результата предыдущего вызова:

const getId = (() => {
  let id = 0;
  return () => ++id;
})();

onResize = () => {
  this.setState(() => ({
    /* ... */
  }));
}

componentDidMount() {
  window.addEventListener('resize', this.onResize);
  this.onResize();
}

componentWillUnmount() {
  window.removeEventListener('resize', this.onResize);
}

https://jsfiddle.net/jmz39vwo/

onChange = {(event, userItem)=>handleChange(event, userItem)}

Убрать userItem из списка параметров: onChange={e => handleChange(e, userItem)}.

Или, onChange={handleChange.bind(userItem)},

function handleChange(e) {
  console.log('userItem', this);
  console.log('value', e.target.value);
}

Функция группировки массива по значениям одного из свойств его элементов, она нам ниже не раз понадобится:

const group = (arr, key) =>
  arr.reduce((acc, n) => (
    (acc[n[key]] = acc[n[key]] || []).push(n),
    acc
  ), {});

Имена свойств группируемых данных, они тоже понадобятся:

const groupItemKeys = [ 'kurs', 'contract', 'credit' ];

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

const groupedData = useMemo(() => {
  return Object.entries(group(data, 'country'));
}, [ data ]);

<tbody>{groupedData.map(([ country, items ], i) =>
  <tr>
    <td>{i + 1}</td>
    <td>{country}</td>
    {groupItemKeys.map(k =>
      <td>{items.map(n => <div>{n[k]}</div>)}</td>
    )}
  </tr>)}
</tbody>

Вариант два - разбиваем данные группы по разным строкам. Для нулевого элемента группы выводим ячейки с данными, общими для группы, этим ячейкам задаём атрибут rowspan со значением, равным размеру группы:

const groupedData = useMemo(() => {
  return Object.values(group(data, 'country'));
}, [ data ]);

<tbody>{groupedData.map((n, i) => n.map((m, j) =>
  <tr>
    {!j && <React.Fragment>
      <td rowSpan={n.length}>{i + 1}</td>
      <td rowSpan={n.length}>{m.country}</td>
    </React.Fragment>}
    {groupItemKeys.map(k => <td>{m[k]}</td>)}
  </tr>))}
</tbody>

Вариант три - сгруппированные данные разворачиваем обратно в общий массив, дополнив их значениями для атрибута rowspan и отбросив ключи, а при рендере - никаких проверок, никаких обращений к конкретным свойствам:

const rowsData = useMemo(() => {
  return Object
    .values(group(data, 'country'))
    .flatMap((items, i) => items.map((n, j) => (j
      ? []
      : [ i + 1, n.country ].map(m => [ m, items.length ])
    ).concat(groupItemKeys.map(k => [ n[k] ]))));
}, [ data ]);

<tbody>{rowsData.map(n =>
  <tr>{n.map(m => (
    <td rowSpan={m[1]}>{m[0]}</td>))}
  </tr>)}
</tbody>

const Figure = ({ type, ...props }) => <div className={type} {...props}></div>;

class App extends React.Component {
  state = {
    types: [ 'circle', 'square', 'triangle' ],
    figures: [],
  }

  add(type) {
    this.setState(({ figures }) => ({
      figures: [ ...figures, type ],
    }));
  }

  render() {
    const { types, figures } = this.state;

    return (
      <div>
        <div>
          {types.map(n => <Figure type={n} onClick={() => this.add(n)} />)}
        </div>
        <div>
          {figures.map(n => <Figure type={n} />)}
        </div>
      </div>
    );
  }
}

Так делать не принято, и вам это не нужно.

Раз у всех этих элементов должен быть один класс, это должны быть корневые элементы экземпляров компонента Preloader. Тэг можно передать через props, как и те элементы, что сейчас являются соседними:

function Preloader({ Tag = 'h1', children }) {
  return (
    <Tag className={s.wrapper}>
      <div className={s.preloader}></div>
      {children}
    </Tag>
  );
}

<div className="App">
  <Preloader>hello, world!!</Preloader>
  <Preloader Tag="h2">fuck the world</Preloader>
</div>

const AccordionItem = ({ title, opened, toggle, children }) => (
  <div>
    <button onClick={toggle}>{title}</button>
    {opened && children}
  </div>
);

const Accordion = ({ items }) => {
  const [ opened, setOpened ] = useState(null);

  return (
    <div>
      {items.map((n, i) => (
        <AccordionItem
          title={n.title}
          opened={i === opened}
          toggle={setOpened.bind(null, i === opened ? null : i)}
        >
          <p>{n.text}</p>
        </AccordionItem>
      ))}
    </div>
  );
};

Что передаётся в компонент AddProductForm:

AddProduct={this.props.addProduct}

Как вы пытаетесь переданное использовать:

this.props.addProduct(product);

Правда считаете, что между "a" и "A" разницы нет?

state = {
  value: 0,
  options: [ 'Не отмечено', 'Отмечено' ],
}

onChange = ({ target: t }) => {
  this.setState(() => ({
    value: +t[t.dataset.stateAttr],
  }));
}

render() {
  const { value, options } = this.state;

  return (
    <div>
      <select
        value={value}
        onChange={this.onChange}
        data-state-attr="value"
      >
        {options.map((n, i) => <option value={i}>{n}</option>)}
      </select>
      <br />
      <label>
        <input
          type="checkbox"
          checked={value}
          onChange={this.onChange}
          data-state-attr="checked"
        />
        {options[value]}
      </label>
    </div>
  );
}

function Card(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card>
        <CircleTopik />
      </Card>
      <Card />
    </div>
  );
}

или

function Card({ showCircle }) {
  return (
    <div>
      {showCircle ? <CircleTopik /> : null}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card showCircle />
      <Card />
    </div>
  );
}

Открываем документацию и видим, что

React.memo затрагивает только изменения пропсов. Если функциональный компонент обёрнут в React.memo и использует useState, useReducer или useContext, он будет повторно рендериться при изменении состояния или контекста.

Вызов switchPatternTable внутри обработчика клика - зачем он там? Да ещё и результат улетает в никуда.

Вызов switchPatternTable в "нужном участке страницы" - во-первых, параметр не передаётся, т.е., результат всегда будет один и тот же; во-вторых, из показанного огрызка неясно, что с этим результатом происходит дальше.

Как бы мог выглядеть рабочий код (вам на подумать - как добавить сюда дефолтный вариант).

<div className="todoListMain">
    <div className="header">

.todoListMain.header input {

Это какое-то невероятное позорище, оправданий которому нет. Пробел между .todoListMain и .header куда потерялся? Ну и с остальными стилями косяк тот же.

массивСДанными.map((n, i) => {
  const Component = i % через_сколько_там_надо_чередовать_компоненты
    ? КомпонентРаз
    : КомпонентДва;

  return <Component {...n} />;
})

https://jsfiddle.net/wd7j5gt1/

Компонент получает через props массив текущих значений и максимально допустимую сумму. Когда пользователь пытается изменить какое-либо из значений, собирается новый массив значений, считается его сумма. Если сумма не превышает максимально допустимую - новый массив значений отдаётся в родительский компонент.

function Ranges(props) {
  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = +t.value;
    const values = props.values.map((n, i) => i === index ? value : n);

    if (props.max >= values.reduce((acc, n) => acc + n, 0)) {
      props.onChange(values);
    }
  };

  return (
    <div>
      {props.values.map((n, i) => (
        <div>
          <input
            type="range"
            data-index={i}
            max={props.max}
            value={n}
            onChange={onChange}
          />
          {n}
        </div>
      ))}
    </div>
  );
}

https://jsfiddle.net/cx16nhqe/