Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

  console.log('data', data) // Object

  const [isOpen, setIsOpen] = useState(false)
  const toggleClassName = () => setIsOpen(!isOpen)

 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```

Ты рендерить должен компонент с родителя

Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

  console.log('data', data) // Object

  const [isOpen, setIsOpen] = useState(false)
  const toggleClassName = () => setIsOpen(!isOpen)

 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```

Ты рендерить должен компонент с родителя

переключать через ref и style.display. только чтобы что?

не понял

пишешь контейнер в ref и на onClick смотришь, что у него там в style.display (либо отдельным флагом в рефе) и меняешь свойство на противоположное

Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

  console.log('data', data) // Object

  const [isOpen, setIsOpen] = useState(false)
  const toggleClassName = () => setIsOpen(!isOpen)

 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```

Не, ты замудрил)

ну можно класс туглить, а не style

ну тогда там в рефе надо смотреть на classList и плясать от этого