React toggle div visibility on button click

Question

I want to toggle the visibility of the div content on button click. For this, I'm using UseId hook as below

function toggleElement(elm_id) {
  var el = document.getElementById(elm_id).nextElementSibling;
      if (el.style.display === "block") {
        el.style.display = "none";
      } else {
        el.style.display = "block";
      }
   
}
function FAQ(props) {
  const clickedElm = useId();
  return (
    <div className="faq-item">
      <button type="button" id = {clickedElm} class="collapsible" onClick={toggleElement(this.id)} >
        {props.question}
      </button>
      <div className="content">
        <p>{props.answer}</p>
      </div>

The above code is showing Error Boundaries not used error. I'm beginner to React. I didn't understand what it is. Where the code is going wrong?

gmoniava · Accepted Answer · 2023-01-08 17:52:26Z

3

It is discouraged in react to touch the DOM directly like you do here:

 if (el.style.display === "block") {
        el.style.display = "none";
      } else {
        el.style.display = "block";
      }

because react has its own internal representation to determine what to update what not, etc.

Instead react way of doing something like what you want is this:

import React from 'react';
import './style.css';

export default function App() {
  let [show, setShow] = React.useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setShow(!show);
        }}
      >
        Click
      </button>
      {show && <div>Hi</div>}
    </div>
  );
}

answered Jan 8, 2023 at 17:52

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

PRJ Over a year ago

{show && <div>Hi</div>} how does this work?

gmoniava Over a year ago

@PRJ well && returns right hand side when both operands are true, so it returns the div, when show is true

PRJ Over a year ago

I have modified it as above, but it is not working @Giorgi Moniava

gmoniava Over a year ago

@PRJ check here: stackblitz.com/edit/react-dti1db?file=src%2FApp.js

PRJ Over a year ago

Why it is not working with loop?

|

Bharti Sharma · Accepted Answer · 2023-01-08 18:38:23Z

I have solved this issue. please check below code :-

    function toggleElement(elm_id) {
        var el = elm_id.currentTarget.nextElementSibling;
            if (el.style.display === "block") {
              el.style.display = "none";
            } else {
              el.style.display = "block";
            }
    }
    function FAQ(props) {
        return (
           <div className="faq-item">
              <button type="button" id='btntest' class="collapsible" onClick={toggleElement}>
                {props.question}
              </button>
              <div className="content">
                 <p>{props.answer}</p>
              </div>
           </div>
        )
    }

There is no need to use UseId hook here and I have just updated some line of your code. Try this out and let me know if it works for you.

Collectives™ on Stack Overflow

React toggle div visibility on button click

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related