Gostaria de saber como faço pra passar e usar os childrens usando function components de arrow functions. Segue como está o meu código para o componente Botao:
import React from "react";
import style from './Botao.module.scss'
export default (props: { texto: string }) => (
<button className={style.botao}>{props.texto}</button>
)
Olá, Leonardo!
Para passar e usar os children em function components de arrow functions no React, você pode fazer o seguinte:
No componente Botao, em vez de definir a propriedade "texto" diretamente, você pode utilizar a propriedade "children" para receber o conteúdo dentro da tag Botao. Assim, você pode passar qualquer tipo de conteúdo, seja texto, elementos HTML ou até mesmo outros componentes.
Aqui está como ficaria o seu código:
import React from "react";
import style from './Botao.module.scss'
export default (props: { children: React.ReactNode }) => (
<button className={style.botao}>{props.children}</button>
)
Dessa forma, você pode utilizar o componente Botao da seguinte maneira:
<Botao>
Adicionar
</Botao>
O texto "Adicionar" será renderizado dentro do botão. E se você quiser passar outro conteúdo, basta substituir "Adicionar" pelo que desejar.
Espero ter ajudado e bons estudos!