Flowbite-react accordion component does not work when I applied State condition?

Question

when I want to show Accordion on the basis of this statement=> {access === 2 && ( <= Screen disapppears.. and after removing this state it works.

Here is the Error and Example

Error :react.development.js:879 Uncaught Error: React.cloneElement(...): The argument must be a React element, but you passed null. Example :

 const [access, setAccess] = useState(null);
  setAccess(2);

 <Accordion arrowIcon="">
            <Accordion.Panel>
                <Accordion.Title >
                  dummy title 1
                </Accordion.Title>
              <Accordion.Content>
                dummy text 1.....
              </Accordion.Content>
            </Accordion.Panel>

      {access === 2 && (
            <>
              <Accordion.Panel>
                <Accordion.Title>
                  dummy title 2
                </Accordion.Title>
                <Accordion.Content>
                dummy text 2.....
              </Accordion.Content>
              </Accordion.Panel>
            </>
            )}
 </Accordion>

`const [access, setAccess] = useState(0);` you have to pass either 0 or 2 instead of null — Kirankumar Dafda, Sep 16 '22 at 08:43

score 0 · Answer 1 · answered Sep 16 '22 at 09:10

you can try using if statement before you run the code. because when the code loads it stars with null which is why it throws the error. for example

if(!access) return <div>loading...</div>

if(access) {
  <Accordion arrowIcon="">
        Accordion.Panel>
            <Accordion.Title >
              dummy title 1
            </Accordion.Title>
          <Accordion.Content>
            dummy text 1.....
          </Accordion.Content>
  </Accordion.Panel>

  {access === 2 && (
    <>
      <Accordion.Panel>
            <Accordion.Title>
              dummy title 2
            </Accordion.Title>
            <Accordion.Content>
            dummy text 2.....
          </Accordion.Content>
          </Accordion.Panel>
        </>
        )}
    </Accordion>
}

Flowbite-react accordion component does not work when I applied State condition?

1 Answers1