Why Too many re-renders?
 

Доброго времени суток. Страница на реакте, на ней должен выводиться список, состоящий из заголовка {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>}
)

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

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

onClick = {onButtonClick(1)}

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

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

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

onClick = {onButtonClick}

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

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

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

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

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

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

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

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

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

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

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

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

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