## Menu accordéon rétractable > `index.html` et `script.js` ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à `script.js` et `style.css`. Pour afficher un menu accordéon avec plusieurs éléments de contenu rétractables, vous pouvez suivre ces étapes : 1. Définissez un composant `AccordionItem` qui rend un `

{children}

); }; const Accordion = ({ defaultIndex, onItemClick, children }) => { const [bindIndex, setBindIndex] = React.useState(defaultIndex); const changeItem = (itemIndex) => { if (typeof onItemClick === "function") onItemClick(itemIndex); if (itemIndex !== bindIndex) setBindIndex(itemIndex); }; const items = children.filter((item) => item.type.name === "AccordionItem"); return ( <> {items.map(({ props }) => ( changeItem(props.index)} children={props.children} /> ))} ); }; ``` ```jsx ReactDOM.createRoot(document.getElementById("root")).render( Lorem ipsum Dolor sit amet ); ``` Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet **Web 8080** pour prévisualiser la page web.