0xD34F

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

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>

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

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

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>

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

logOut () {

onConfirm={this.logOut}

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 ]);

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 onSearch={search => setValue({ ...value, inputValue: search })} />

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

values: Array(height).fill(Array(width).fill(null))

values: Array.from({ length: height }, () => Array(width).fill(null))

const initialState = {
  player: 'X',
  cells: Array.from({ length: 3 }, () => Array(3).fill(null)),
};

const store = createStore((state = initialState, action) => {
  switch (action.type) {
    case 'MOVE':
      return {
        ...state,
        player: state.player === 'X' ? 'O' : 'X',
        cells: state.cells.map((row, iRow) => iRow === action.location[0]
          ? row.map((cell, iCol) => iCol === action.location[1] ? state.player : cell)
          : row
        ),
      };

    case 'RESET':
      return initialState;

    default:
      return state;
  }
});

const Board = connect(({ cells }) => ({ cells }))(({ cells }) => (
  <div class="board">
    {cells.map((row, iRow) =>
      <div className="row">
        {row.map((cell, iCol) =>
          <Cell location={[ iRow, iCol ]} value={cell} />
        )}
      </div>
    )}
  </div>
));

const Cell = connect(null, (dispatch, { location }) => ({
  onClick: () => dispatch({ type: 'MOVE', location }),
}))(({ value, onClick }) => (
  <div className="cell">
    <button onClick={onClick} disabled={value !== null}>
      {value}
    </button>
  </div>
));

const Reset = connect(null, dispatch => ({
  reset: () => dispatch({ type: 'RESET' }),
}))(({ reset }) => (
  <button onClick={reset}>RESET</button>
));

const App = () => (
  <Provider store={store}>
    <Reset />
    <Board />
  </Provider>
);