Como fazer um componente Accordion no React.js + Typescript

No mundo do desenvolvimento web, criar componentes reutilizáveis é essencial para manter um código limpo e organizado. No React.js, podemos criar um componente Accordion para exibir conteúdo de forma expansível e recolhível. Vamos aprender como fazer isso utilizando também o Typescript.

Passo 1: Configuração do ambiente

Para começar, certifique-se de ter o Node.js e o npm instalados em sua máquina. Em seguida, crie um novo projeto React.js com Typescript utilizando o comando:
npx create-react-app my-accordion-app --template typescript

Passo 2: Criação do componente Accordion

Crie um novo arquivo chamado “Accordion.tsx” na pasta components do seu projeto. Em seguida, adicione o código abaixo para criar o componente Accordion:

      
import React, { useState } from 'react';

type AccordionProps = {
  title: string;
  children: React.ReactNode;
};

const Accordion: React.FC = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    

      {title}
      {isOpen && 
{children}
}
    
  );
};

export default Accordion;
      
    

Passo 3: Utilização do componente Accordion

Agora que o componente Accordion está criado, você pode utilizá-lo em qualquer parte do seu aplicativo React. Basta importar o componente e passar o título e o conteúdo que deseja exibir no Accordion. Por exemplo:

      
import React from 'react';
import Accordion from './components/Accordion';

const App: React.FC = () => {
  return (
    

      
        
Conteúdo do Accordion 1
      
      
        
Conteúdo do Accordion 2
      
    
  );
};

export default App;
      
    

Conclusão

Ao seguir esses passos, você será capaz de criar um componente Accordion no React.js utilizando Typescript. Este componente será útil para organizar e ocultar conteúdo de forma expansível, contribuindo para uma melhor experiência de usuário em suas aplicações.