1
resposta

O Componente CampoTexto não poderia ser o responsável por atualizar o valor do input?

No segundo vídeo da parte 3 o professor sugere criar 3 useStates: nome, cargo e imagem e passar para o componente CampoTexto 2 propriedades, 'valor' e a função 'aoAlterado'.

Existe algum problema em implementar a seguinte solução?

CampoTexto.js

import { useState } from 'react';
import './CampoTexto.css'

const CampoTexto = (props) => {

    const [valor, setValor] = useState(props.valor);

    const aoDigitar = (event) => {
        setValor(event.target.value);
    }

    return (
        <div className='campo-texto'>
            <label>{props.label}</label>
            <input
                value = {valor}
                onChange={aoDigitar} 
                required={props.obrigatorio} 
                placeholder={props.placeholder} />
        </div>
    );
}

export default CampoTexto;

Nesse caso, só precisariamos passar a propriedade 'valor' para cada implementação do componente CampoTexto, eliminando assim a necessidade de 3 setStates no componente Formulario.

1 resposta

Salve, Carlos!

Porque precisamos ter acesso ao estado de cada campo, não só o inicial. As props são sempre imutáveis, então embora o valor inicial funcione você não vai conseguir acompanhar as alterações em cada valor.