> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-avancado/reactjs/eventos.md).

# Eventos

Ao contrário do JavaScript puro, no React podemos invocar funções diretamente ao lidarmos com eventos. Neste exemplo, vamos mostrar a idade de uma pessoa quando clicamos no seu nome.

Embora seja possível usar a função do JavaScript puro diretamente no componente, essa abordagem não é a mais recomendada. Vamos explorar uma solução que envolve chamar uma função separada, o que ajuda a modularizar o código de forma mais eficiente.

```jsx
import React from 'react';

interface BoasVindasProps {
    nome: string;
    idade: number;
}

function BoasVindas(props: BoasVindasProps) {
    function handleClick() {
        alert("Idade: " + props.idade);
    }

    return (
        <div onClick={handleClick}>
            <h1>Olá, seja bem-vindo {props.nome}</h1>
        </div>
    )
}

export default BoasVindas
```

Outra possibilidade é passar a função por parâmetro, executando ela no componente pai (que nesse caso é App). Para isso, devemos definir a função do evento no componente pai, passar a função como prop ao filho e, no filho, utilizar a função através da props, da seguinte forma.

Em App.tsx:

```jsx
import React from 'react';
import './App.css';

// Importa o componente que criamos de seu diretório
import BoasVindas from './components/BoasVindas/BoasVindas';

function App() {
  function handleClick(idade: number) {
    alert("Idade: " + idade);
  }

  return (
    <div>
      <BoasVindas nome="Fulano" idade={23} onClick={handleClick} />
      <BoasVindas nome="Ciclano" idade={14} onClick={handleClick} />
    </div>
  );
}

export default App;
```

No Componente:

```jsx
import React from 'react';

interface BoasVindasProps {
    nome: string;
    idade: number;
    onClick: (idade: number) => void;
}

function BoasVindas(props: BoasVindasProps) {
    return (
        <div onClick={() => { props.onClick(props.idade) }}>
            <h1>Olá, seja bem-vindo {props.nome}</h1>
        </div>
    )
}

export default BoasVindas
```

Resultado:

<figure><img src="https://552011742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEJ_IxNzk9of-u9NQeq%2Fuploads%2Fno0Gr8uvAffKVKinUzk6%2Fimage.png?alt=media&amp;token=5d435884-52db-43d9-8808-9667ca68d928" alt=""><figcaption></figcaption></figure>