0xD34F

{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>
    );
  }
}

function App() {
  const [ items, setItems ] = useState([]);

  const onItemClick = ({ target: { dataset: { id } } }) =>
    setItems(items.filter(n => n !== +id));

  const onAddNewClick = () =>
    setItems([ ...items, 1 + Math.max(0, ...items) ]);

  return (
    <div>
      {items.map(n => <button onClick={onItemClick} data-id={n}>#{n}</button>)}
      <button onClick={onAddNewClick}>add</button>
    </div>
  );
}

children

const [ items, setItems ] = useState([
  { value: ..., text: '...', checked: false },
  { value: ..., text: '...', checked: false },
  ...
]);

const onChange = ({ target: { checked, dataset: { index } } }) => {
  setItems(items.map((n, i) => i === +index ? { ...n, checked } : n));
};

<form>
  {items.map((n, i) => (
    <div>
      <label>
        <input
          type="checkbox"
          data-index={i}
          value={n.value}
          checked={n.checked}
          onChange={onChange}
        />
        {n.text}
      </label>
    </div>
  ))}
  <button disabled={items.every(n => !n.checked)}>submit</button>
</form>

https://jsfiddle.net/ps6zt52a/

Делайте как вам удобнее. Как сказано в документации,

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

могу получить координаты

ну тогда нет проблем выполнить обратное геокодирование

Функция группировки:

const group = (arr, idKey, valKey) =>
  Object.values(arr.reduce((acc, { [idKey]: id, [valKey]: val }) => (
    (acc[id] = acc[id] ?? { [idKey]: id, [valKey]: [] })[valKey].push(val),
    acc
  ), {}));

В компоненте:

const groupedAddresses = useMemo(() => {
  return group(addresses, 'city', 'address');
}, [ addresses ]);

<ul>
  {groupedAddresses.map(n => (
    <li>
      <h3>{n.city}</h3>
      <ul>{n.address.map(m => <li>{m}</li>)}</ul>
    </li>
  ))}
</ul>

https://jsfiddle.net/vqLsyz0x/

Нужно как-то парсить полученный html...

Не нужно.

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

Ну а вообще, ерундой какой-то занимаетесь - какой к чёрту html? Если используете react, то так дела не делаются.

Делай раз:

logOut () {

Делай два:

onConfirm={this.logOut}

Всё, контекст потерян.

https://jsfiddle.net/a13ef8ms/

handleDelete = e => {
  const id = +e.currentTarget.dataset.id;
  this.setState(({ data }) => ({
    data: data.filter(n => n.id !== id),
  }));
}

const CardList = ({ cards, handleDelete }) => (
  <div className="cards__list">
    {cards.map(n => <CardInfo {...n} handleDelete={handleDelete} />)}
  </div>
);

<CloseOutlined onClick={props.handleDelete} data-id={props.id} />

useEffect(() => () => clearTimeout(timer), [ timer ]);

Повесьте обработчик onLoad, внутри которого доставайте width и height. Например.

this.slider.current.slick.slideCount

Пусть Search хранит значение, которое вводит пользователь, и принимает обработчик клика по кнопке, которому при вызове будет передаваться значение:

const Search = props => {
  const [ value, setValue ] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.onSearch(value)}>Search</button>
    </div>
  );
};

А в родительском компоненте, соответственно, в Search передаёте функцию, которая обновит что там вам надо:

<Search onSearch={search => setValue({ ...value, inputValue: search })} />

https://jsfiddle.net/fp0dvhrg/

Продублированы данные - зачем? Пусть результат поиска будет изначально пуст, выполняйте поиск после создания экземпляра компонента. Чтобы не пришлось дублировать код поиска, разделите метод на два: один обновляет значения для поиска, другой выполняет собственно поиск и вызывается в двух местах - в componendDidMount и после обновления объекта значений для поиска.

Стейт обновляется асинхронно, так что сразу после вызова setState вы не увидите в стейте только что обновлённое значение и будете выполнять поиск по старому. Вторым параметром в setState можно передать функцию, которая будет выполнена после обновления стейта - передавайте метод поиска. Или же, в componentDidUpdate проверяйте, что текущий объект поиска не равен предыдущему и в этом случае вызывайте метод поиска.

Конвертация в json - зачем?

Почему любая успешная проверка приводит к помещению элемента данных в массив результатов поиска? Так результаты будут дублироваться - скольким значениям из объекта поиска соответствует элемент данных, столько раз он будет помещён в массив результатов. Надо убедиться, что элемент данных соответствует всем значениям из объекта поиска, и только после этого помещать его в массив результатов.

Значение общего поиска должно обрабатываться в особом порядке - надо проверять его соответствие любому из свойств элемента данных.

https://jsfiddle.net/vLk97n6y/1/

Ерунду какую-то написали в render. Делайте так:

render: val => val
  ? <Tag color="success">Активен</Tag>
  : <Tag color="default">Не активен</Tag>