reactjs - Using React-bootstrap, why is the first accordion not opening on load page or toggling

Question

I am trying to toggle the accordion which works perfectly but unfortunately the first which is default isn't opening the body by default. I don't know why it would behave differently as I have all the code in loop, and other accordion bodies are displaying and working perfectly.

import React, {useState} from 'react'
import SiteLayout from '../Components/SiteLayout/SiteLayout'
import {Accordion, Card , useAccordionToggle }from 'react-bootstrap'
import {
    faPlus, 
    faMinus
    } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
function CustomToggle({ children, eventKey, handleClick }) {
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
      handleClick()
    );
  
    return (
      <button
        type="button"
        style={{ backgroundColor: 'transparent' }}
        onClick={decoratedOnClick}
      >
        {children}
      </button>
    );
  }
export default function Resources() {
    
    const [activeKey, setActiveKey] = useState(0)
    const data = [
        {
            title: 'Port-Harcourt',
            content: 'Rough but very place '
        },
        {
            title: 'Abuja',
            content: 'Neat but a lot of diplomacy '
        },
        {
            title: 'Lagos',
            content: 'Neat and Rough, but a lot of politics'
        },
    ]
    return (
        
        <SiteLayout>
            <Accordion defaultActiveKey={0} activeKey={activeKey}>
                {
                    data.map((item, index) => (
                        <Card key={index}> 
                            <Card.Header> {item.title} 
                                <CustomToggle eventKey={index} 
                                    handleClick ={() => {
                                        if (activeKey === index ) {
                                            setActiveKey(null)
                                        }else {
                                            setActiveKey(index)
                                        }
                                    }}
                                >
                                    {activeKey === index ? <FontAwesomeIcon icon={faMinus}  /> : <FontAwesomeIcon icon={faPlus} />}
                                </CustomToggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey={index}>
                                <Card.Body>
                                    {item.content}
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    ))
                }
                
                
            </Accordion>
        </SiteLayout>
    )
}

I don't know what I am doing wrong and why the first accordion body isn't displaying. Thank you

question from:https://stackoverflow.com/questions/65887421/using-react-bootstrap-why-is-the-first-accordion-not-opening-on-load-page-or-to

Answer 1

EventKey is a String type variable, your initial value is a number type variable. You can change the initial value of the active key to a string value and convert the index value to a string in the collapse.

import React, {useState} from 'react'
import {Accordion, Card , useAccordionToggle }from 'react-bootstrap'
import {
    faPlus, 
    faMinus
    } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
function CustomToggle({ children, eventKey, handleClick }) {
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
      handleClick()
    );
  
    return (
      <button
        type="button"
        style={{ backgroundColor: 'transparent' }}
        onClick={decoratedOnClick}
      >
        {children}
      </button>
    );
  }

export default function Resources() {
    
    const [activeKey, setActiveKey] = useState("0")
    const data = [
        {
            title: 'Port-Harcourt',
            content: 'Rough but very place '
        },
        {
            title: 'Abuja',
            content: 'Neat but a lot of diplomacy '
        },
        {
            title: 'Lagos',
            content: 'Neat and Rough, but a lot of politics'
        },
    ]
    return (
        
            <Accordion defaultActiveKey={"0"} activeKey={activeKey}>
                {
                    data.map((item, index) => (
                        <Card key={index}> 
                            <Card.Header> {item.title} 
                                <CustomToggle eventKey={index} 
                                    handleClick ={() => {
                                        if (activeKey === index ) {
                                            setActiveKey(null)
                                        }else {
                                            setActiveKey(index)
                                        }
                                    }}
                                >
                                    {activeKey === index ? <FontAwesomeIcon icon={faMinus}  /> : <FontAwesomeIcon icon={faPlus} />}
                                </CustomToggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey={index.toString()}>
                                <Card.Body>
                                    {item.content}
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    ))
                }
                
                
            </Accordion>
    )
}