CODEWITHSUNDEEP
reactjsflowbite
Hafiz Qaiser
Hafiz Qaiser

Reputation: 11

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

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>

Upvotes: 0

Views: 1142

Answers (1)

paperskyline
paperskyline

Reputation: 361

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>
}

Upvotes: 0

Related Questions