How To Use The Usestate() Hook To Open / Close All Detail Tags In Reactjs?

I have a useState() hook to assert or deny the open (isOpen) attribute of 3 detail tags and also 2 button(s) to control the hook, all wrapped in a div: This code is part of a Docu

Solution 1:

1) Your component must start with a capital letter.

constSamplePage = () =>

2) You are setting the state incorrectly on each button. You want to set it to true on the "Open all details" button, and false on the "Close all details" button:

<buttononClick={() => setIsOpen(true)}>Open All Details.</button><buttononClick={() => setIsOpen(false)}>Close All Details.</button>

constSamplePage = () => {
  const [isOpen, setIsOpen] = React.useState(false); 

  return (
      <div><detailsopen={isOpen}><summary>
                  First text detail.
              </summary><p>testing</p></details><detailsopen={isOpen}><summary>
                  Second text detail.
              </summary><p>testing</p></details><detailsopen={isOpen}><summary>
                  Third text detail.
              </summary><p>testing</p></details><buttononClick={() => setIsOpen(true)}>Open All Details.</button><buttononClick={() => setIsOpen(false)}>Close All Details.</button></div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SamplePage />, rootElement);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><divid="root"/>