import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Accordion , AccordionItem , AccordionButton , AccordionPanel } from './Accordion' ; import { FaAngleRight , FaAngleDown } from 'react-icons/fa' ; import './styles.scss' ; function App ( ) { const [ index , setIndex ] = React . useState ( 0 ) ; return ( < Accordion onChange = { setIndex } defaultIndex = { 0 } > < AccordionItem > < AccordionButton > { index === 0 ? < FaAngleDown /> : <FaAngleRight / > } < span > What is ARIA ? < /span> < /AccordionButton> < AccordionPanel > A way to make web content more accessible : "Accessible Rich Internet Applications" . < /AccordionPanel> < /AccordionItem> < AccordionItem > < AccordionButton > { index === 1 ? < FaAngleDown /> : <FaAngleRight / > } < span > What does "a11y" stand for ? < /span> < /AccordionButton> < AccordionPanel > A11y is short for "accessibility" since there are 11 characters between "a" and "y" . < /AccordionPanel> < /AccordionItem> < /Accordion>); } ReactDOM . render ( < App />, document.getElementById('root'));