Почему состояние в useState меняется само?

Question

[Svetlana_Ilina]

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

const [lists, setLists] = useState([
    {
      title: '', links: [], date: '', active: false,
    },
])

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

function activatePost(event, title) {
    const newList = [...lists].map((item) =>
      item.title === title
        ? { ...item, active: true }
        : { ...item, active: false }
    )
    console.log(newList)
    setLists(newList)
  }

дочерний компонент вида возвращается в виде

<div
      className={active ? 'post active' : 'post'}
      {...props}
      onClick={(event) => activatePost(event, title.toLowerCase())}
    ></div>

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


1. почему их в принципе два?
2. что сделано не так, что он сразу становится false?

Comments

[chemdev]

С трудом понял что я прочитал. Если вся история просто ради того чтобы менять стиль на active/not active то очень много лишних телодвижений

[chemdev]

Включен React.StrictMode?

[Svetlana_Ilina]

chemdev, включила, ошибок не выдает

[WbICHA]

Ты бы весь компонент скинула, где стейт используется. А ещё лучше в песочницу запихнула бы.

[Svetlana_Ilina]

WbICHA, проблема решилась остановкой всплытия у дочернего компонента

[Svetlana_Ilina]

chemdev, а как проще это реалищовать?