1
resposta

Dúvida sobre o {type = "text"}:

Entendi que usando o {type = "text"}:, este text vai ser considerado como valor padrão. Porém, fiquei com curiosidade sobre se é possível fazer algo semelhante se eu estivesse passando (props) e usando props.type. Como eu poderia definir um valor padrão desta forma?

1 resposta

Oi Luan, tudo bem?

No React, você pode definir valores padrão para suas props usando a funcionalidade de desestruturação do JavaScript juntamente com valores padrão para argumentos de função.

No seu caso, se você está passando (props) e quer usar props.type, você pode fazer algo assim:

const MeuComponente = (props) => {
    let { type = "text" } = props;
    //...
}

Ou, de forma mais concisa, você pode desestruturar props diretamente nos argumentos da função:

const MeuComponente = ({ type = "text" }) => {
    //...
}

Em ambos os casos, se props.type não for fornecido ao instanciar MeuComponente, type será definido como "text" por padrão.

No exemplo da aula, o instrutor usou a segunda abordagem para definir um valor padrão para o tipo de input em um componente de campo:

const Campo = ({ type = 'text', label, placeholder, valor, aoAlterado, obrigatorio = false }) => {
    return (
      <div className='campo'>
        <label>{label}</label>
        <input type={type} value={valor} onChange={evento => aoAlterado(evento.target.value)} required={obrigatorio} placeholder={placeholder}/> 
      </div>
    )
}

Neste caso, se type não for fornecido ao instanciar Campo, ele será definido como 'text' por padrão.

Espero ter ajudado.

Um abraço e bons estudos.