Why Too many re-renders?

[BodNS]

Доброго времени суток. Страница на реакте, на ней должен выводиться список, состоящий из заголовка {title} и содержания {body}. При первой отрисовке должны выводится только заголовки и содержание 1-го элемента списка. Далее при нажатии на любой заголовок должно отображаться его содержание, а уже открытое содержание "закрываться". По факту - Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Подскажите, что не так?

const [openId, setopenId] = useState(1);


    const onButtonClick = (liId) => {
       setopenId({openId: openId === liId ? openId : liId})
return (
<div className={styles.li_container}>
                    <ul>
                       <li key = {1}>
                            <button onClick = {onButtonClick(1)} className={styles.headerLi}>Can I see any examples?</button>
                         {openId === 1 &&  <div id="example1" className={styles.bodyLi}>  Our creatives have submitted more than 6 Million names and thousands of logos on our ntests.          
                            </div>}
                        </li>
                        <li key = {2}>
                        <button onClick = {onButtonClick(2)} className={styles.headerLi}>111Can I see any examples?</button>
                         {openId === 2 &&    <div className={styles.bodyLi}>
                                111Our creatives have submitted more than 6 Million names and thousands of logos onubmitted in recent contests.
                                             </div>}
)

[Aetae]

Во-первых: оберни код в [js]. И вообще всегда в интернете если ты где-то кажешь свой код - оборачивай его в соответствующий тег. Никто не будет твою стену мусора неформатированную разбирать.
Во-вторых: здесь только кусок, выкладывай полноценный пример.

[Aetae]

Но вообще и так вижу, проблема в:

onClick = {onButtonClick(1)}

React вам не Vue, он тупой и действует также как чистый javascript: onButtonClick(1) - это вызов функции onButtonClick с параметром 1 вот прямо сейчас во время рендера, в сам же onClick назначается возвращаемое из onButtonClick значение, в данном случае undefined.
Надо назначать обработчиком функцию, а не её результат:

onClick = {() => onButtonClick(1)}

Но правильнее делать так:

onClick = {onButtonClick}

А 1 это или 2 получать внутри onButtonClick из event.target.

[BodNS]

Спасибо, что ответил. Стало чуть понятнее. При попытке "использовать" event.target была ошибка "невозможно прочитать значение null".

Во-первых: оберни код в [js]. И вообще всегда в интернете если ты где-то кажешь свой код - оборачивай его в соответствующий тег.

Первый раз пишу на подобном форуме, объясни популярно для тех кто в танке, что значит оберни код в [js] и в какой соответствующий тег надо оборачивать код?

[рони]

что значит оберни код

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[BodNS]

Пожалуйста, отформатируйте свой код!

У Вас нет прав для выполнения этого действия... Как отформатировать?

[рони]

У Вас нет прав

выйти - зайти, не поможет - ждать полнолуния.

[ksa]

Подскажите, что не так?

Есть мнение... (с)
Что для решения этой простой задачи ты сильно говнокодишь.

Заголовки это какой-то текст?
А что такое их "содержание"?
Обычно для такого рода данных уже можно организовать некий сторадж с данными, а потом эти данные выводить на странице.

У тебя же какая-то голимая "статика", да еще в таком не лицеприятном виде.

[Aetae]

не лицеприятном

неприглядном