0xD34F

В родительском компоненте:

const [ active, setActive ] = useState(null);

{items.map((n, i) => (
  <FirstWindowItems
    item={n}
    isActive={active === i}
    onClick={() => setActive(i)}
  />
))}

В FirstWindowItems:

function FirstWindowItems({ item, isActive, onClick }) {
  return (
    <div className={`window__items ${isActive ? 'active' : ''}`} onClick={onClick}>
      ...

.window__items.active {
  здесь стили для активного элемента
}

Встречный вопрос: как нужные вам данные попали туда, откуда вы собираетесь их "получать"? Ничего делать не надо, всё уже есть - работайте внутри handleClick с объектом item.

const [users, setUsers] = useState({user:['user1', 'user2', 'user3']});

Здесь users это объект, единственное свойство которого является массивом.

setUsers(users.user.filter((item,i) => i !== index));

А здесь - массив.

const list = users.user.map(...

У этого массива вы пытаетесь прочитать свойство user, которого нет, получаете undefined, а дальше... Ну, сообщение об ошибке вы уже видели.

Вы бы определились, чем должен быть users.

useEffect

<Route path="/products" component={Products} />

Сюда добавить exact.

return <h1>Product# {match.slug}</h1>;

Здесь должно быть match.params.slug.

В родителе:

state = {
  modal: false,
}

hideModal = () => {
  this.setState({ modal: false })
}

render() {
  return (
    ...
      {this.state.modal ? <Modal close={this.hideModal} /> : null}
    ...
  );
}

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

return (
  <div
    className="modal-overlay"
    onClick={e => (e.currentTarget === e.target) && props.close()}
  >
    <div className="modal-content">
      ...
    </div>
  </div>
);

https://jsfiddle.net/5d0t9feh/

я знаю, что правильно менять состояние предыдущего state, то есть setState( prev => !prev ), но как это прописать для моего случая, когда предыдущее состояние должно поменять на значение item.value ?

Если новое состояние не зависит от старого, то и не надо старое состояние трогать: setState(() => value).

нажимаю кнопку Д после кнопки М и в indicator сохраняется значение кнопки М

Чушь. Откуда вы это взяли? Сохраняемое значение у вас лежит в value, не надо смотреть на indicator в момент вызова setIndicator. Делайте это через эффект:

useEffect(() => console.log('indicator: ', indicator), [ indicator ]);

const Button = ({ children, className = '', ...rest }) => (
  <button {...rest} className={`button ${className}`}>
    {children}
  </button>
);

Зачем вы дублируете в стейт пропсы? Не надо. Компонент Table - вырезать startDate и endDate, при запросе вместо них использовать props.startDate и props.endDate.

идентичны

Уверены? - l и 1 совсем не одно и то же.

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

function App() {
  const [ seconds, setSeconds ] = React.useState(60);
  const [ timerActive, setTimerActive ] = React.useState(false);

  React.useEffect(() => {
    if (seconds > 0 && timerActive) {
      setTimeout(setSeconds, 100, seconds - 1);
    } else {
      setTimerActive(false);
    }
  }, [ seconds, timerActive ]);

  return (
    <div>
      {seconds
        ? <React.Fragment>
            <button onClick={() => setTimerActive(!timerActive)}>
              {timerActive ? 'stop' : 'start'}
            </button>
            <div>{seconds}</div>
          </React.Fragment>
        : <button onClick={() => setSeconds(60)}>ещё раз</button>
      }
    </div>
  );
}

https://jsfiddle.net/9rx1qhsy/1/

https://jsfiddle.net/mwoLsdr7/

Вы пытаетесь получать категорию до того, как получен продукт. Т.е., product.catId у вас undefined. Надо добавить продукт как зависимость эффекту в котором получаете категорию, внутри самого эффекта проверять, что идентификатор категории есть - и только в этом случае делать запрос:

useEffect(() => {
  axios.get('/api/products/random-lucky-box').then(r => setProduct(r.data));
}, []);

useEffect(() => {
  if (product.catId) {
    axios.get(`/api/categories/${product.catId}`).then(r => setCategory(r.data));
  }
}, [ product ]);

const Indicator = ({ value, max = 6 }) => (
  <div>
    {Array.from({ length: max }, (_, i) => (
      <div className={`indicator-cell ${i < value ? 'active' : ''}`}></div>
    ))}
  </div>
);

.indicator-cell {
  background: white;
}
.indicator-cell.active {
  background: red;
}

<Indicator value={4} />
<Indicator value={1} />
<Indicator value={8} max={12} />

https://jsfiddle.net/j9w03sba/

Очень просто - в один блок монтируется приложение на react, в другой на vue.

Зачем - вопрос не сюда, спросите у тех, кто так сделал.

Никак не исправить, всё работает правильно. Хотите пощупать изменённое значение - для этого есть useEffect.

const styles = () => ({
  wrapper: {
    background: 'red',
    color: 'blue',
    '& h1':  {
      color: 'green',
      '& a': {
        color: 'magenta',
      }
    },
  },
});

Соответственно, при отрисовке компонента только wrapper и указываете.

<TreePicker
  locale={{
    searchPlaceholder: 'hello, world!!',
  }}

Правда, есть проблема - значение не объединяется с дефолтным, а заменяет его, так что придётся дополнительно указывать остальные свойства, если не хотите видеть пустоту на месте основного плейсхолдера и сообщения об отсутствии результатов поиска.

const [ form, setForm ] = useState({
  login: '',
  password: '',
});

const onChange = ({ target: t }) => setForm({ ...form, [t.name]: t.value });

<input name="login" value={form.login} onChange={onChange} />
<input name="password" value={form.password} onChange={onChange} />

const [ width, setWidth ] = useState(0);
const onChange = e => setWidth(e.target.value);
const styles = { width: `${width}px` };

<input value={width} onChange={onChange} />
<div style={styles}>