Neste trecho da aula:
Em input, diremos que o type é igual ao type que recebemos via props. Porém, se estivermos fazendo uma refatoração e tivermos um componente do tipo 'text' sendo já utilizado em outros lugares e mudarmos para outro diferente, poderemos ter problemas nesses outros.
Portanto, se dissermos que o type padrão é igual a 'text', não teremos essa questão, pois na forma como está, é exatamente igual ao que estava antes. Mas agora temos uma nova propriedade type e, se os novos componentes que utilizarmos tiverem um tipo diferente, só irá alterar esta parte e não os outros componentes que fizemos.
Então essa é uma forma de fazermos uma refatoração eficiente que não causa problemas no código.
Que problemas o código pode ter se não especificarmos o type padrão como text? Meu código é um pouco diferente e eu estou usando a propriedade props para tudo.
const Campo = (props) => {
const aoDigitar = (evento) => {
props.aoAlterar(evento.target.value)
}
return (
<div className={`campo campo-${props.type}`}>
<label>
{props.label}
</label>
<input
type={props.type}
value={props.valor}
onChange={aoDigitar}
required = {props.obrigatorio}
placeholder={props.placeholder}/>
</div>
)
}
export default Campo
Mais pra frente, quando o professor foi inspecionar o campo de cores, ele destacou as duas divs de cima do input. Uma era campo-color e a outra era campo-text.
Por eu não ter especificado e usado props, ao invés de campo-text, minha div ficou como campo-undefined. Mesmo assim, o código funcionou e consegui criar um novo time sem nenhum problema. Se eu manter meu código desse jeito e não criar o type='text' juntamente com outras propriedades da função, o que pode acontecer?
