Como seria feito o console.log(this.state) no formato de função?

Olá, tudo bem?

No formato de function component nós não teríamos apenas um estado, e sim um estado criado com o hook useState, então se o valor estiver dentro do useState ele estaria assim:

const [valorDoInput, setValorDoInput] = useState('');

e para chamá-lo seria assim:

console.log(valorDoInput);

Caso tenha alguma dúvida sinta-se a vontade para continuar este tópico ou criar outro, beleza?

Bons estudos!

Opa, obrigado pelo curso instrutor :D!

Entendi, eu estava tentando colocar o setValorInput no console.log e estava mostrando uma função q não estava entendo nada, então é correto assumir que o valorDoInput sempre será o valor inicial e também o valor que sempre será atualizado enquanto o setValorDoInput sempre será apenas a função que atuará como o valorDoInput será atualizado??

aproveitando o momento, se for possível, vc poderia dar uma luz na forma como o react atua neste exemplo?

na implementação do type do botao foi criado um interface props com o type para que seja possivel passar o tipo onSubmit do botão, no formato que eu fiz eu coloquei da seguinte maneira

interface Props{
    children?: React.ReactNode
    tipo?: "button" | "submit" | "reset" | undefined
}

function Botao ({children, tipo}:Props){
    return(
        <button type={tipo} className={style.botao}>
            {children}
        </button>
    ) 
}

na hora de passar o parametro type do botao a minha intuição foi fazer

            <Botao type="submit">
                Adicionar
            </Botao>

mas houve erro e tive que usar o mesmo nome que passei como parâmetro dentro da função que é o tipo, isso me gerou confusão pq dentro da função o tipo é utilizado para passar oque o type recebe mas quando ele é utilizado na lista ele não recebe type = "tipo" o próprio tipo vira o parametro type, é correto afirma que mesmo a funcao Botao sendo de button>ele não recebe os mesmos parametros que o button receberia, eu q crio todas as funcionalidades do button? o button é apenas o formato que vou utilizar, todo resto deve ser curtomizável por mim mesmo?

Uma última dúvida hehe o children é uma palavra separada do react? para poder atualizar o nome do botão no formato Nome igual ao html tem que ser usado a palavra children mesmo eu criando uma outra variavel React.ReacNode dentro de props com nome diferente se não for o nome children eu recebo erro.

    `interface Props{
    children?: React.ReactNode
    tipo?: "button" | "submit" | "reset" | undefined
}

function Botao ({children, tipo}:Props){
    return(
        <button type={tipo} className={style.botao}>
            {children}
        </button>
    ) 
}`

    <botao>funciona<botao/>

children é substituído por qualquer outro nome, não funciona.

Obrigadoooooo!!!

Olá! Temos 3 perguntas aqui, vamos lá:

1. Isso aí! Desde que você utilize este estado como o value do input, ele que será o valor do input e a função deste useState será utilizado no onChange
2. Não sei se entendi a pergunta, mas você queria utilizar a prop type no Botão e no type estava como tipo, certo? Neste caso tudo que você passa para o componente que é criado você deve recriar sim, mas existe um macete para resolver isto! Se você quiser todas as props que um botão teria por exemplo, você consegue herdar as props deste elemento!, vou te dar um exemplo:

interface Props extends React.ComponentPropsWithoutRef<"button">{ // herda de ComponentPropsWithoutRef
    children?: React.ReactNode
}

function Botao ({children, ...outrosProps}:Props){ // spread do parâmetro
    return(
        <button {...outrosProps} className={style.botao}> // spread de props
            {children}
        </button>
    ) 
}

Aqui temos várias coisas interessantes:

• primeiramente você herdou o seu tipo de ComponentPropsWithoutRef, que é um tipo especial do React que consegue pegar qualquer tipo de props de qualquer atributo, apenas passando o nome dele entre menor e maior <"button">
• Também tivemos que dar um spread de outrosProps, pois como não temos ideia de o que vai ser passado para o componente Botao (você pode querer passar type, onClick, onChange, onBlur etc), este spread do parâmetro significa que você está pegando children e todo o resto dos props que você não sabe quais são. Todos os outros props virão como um objeto neste outrosProps, e caso não venha nenhum outrosProps será um objeto vazio.
• Você precisa passar todos estes props para a tag button, e como você não sabe quais são você precisa utilizar o spread para passar isto também.
• Lembrando que como você passou o className depois do spread de outrosProps, é possível que um className em <Botao className="..." /> não funcione, aí você teria que concatenar com o className que você passou em <button {...outrosProps} className={style.botao}>, ficaria assim:

<button {...outrosProps} className={`${style.botao} ${outrosProps.className || ''}`}> //  este || é caso nenhum className tenha sido passado

Você pode ler mais sobre o que eu fiz nesta documentação, tem várias informações legais lá (só que está em inglês).

1. O children é uma prop reservada do react, ele corresponde ao filho do Componente (O que você coloca dentro dele) ou seja:

   <Componente>
   <div>
    Hello World
   </div>
   </Componente>

   Acima o children de Componente é a tag div, e o children de div é uma string Hello World!

Espero que tenha te esclarescido, caso não tenha fique a vontade para continuar este tópico.

Bons estudos!

Muito massa!! obrigado pelo link e por tirar todas as dúvidas!! estou aprendendo muito!! Obrigado novamente pelo curso!!