He logrado hacer un formulario que se autocompleta al seleccionar el nombre de un usuario, llenando los demas imputs como, usuario, telefono y email automaticamente, pero quisiera saber como optimizarlo porque que tal que sean 15 campos en el form hacerlo de la manera que lo hice se que no es la mejor por repetir la misma linea de codigo
const selectedUsername = e.target.options[selectedIndex].getAttribute('')
tantas veces yo creeria que se podria hacer con un condicional pero no he logrado hacerlo.
Aca les dejo el componente:
const [state, setState] = React.useState({
Usuario: '',
Telefono: '',
Email: '',
Persona: 'Selecciona una opcion',
});
const [usuarios, setUsuarios] = React.useState([])
React.useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(resp => {
setUsuarios(resp.data)
console.log(resp)
})
}, []);
const Opciones = () => {
return (
<Form.Control as="select" aria-label="Default select example" onChange={handleChangePerson}>
<option>{state.Persona}</option>
{usuarios.map(({id, name, phone, email, username }) => (
<React.Fragment key={id}>
<option value={name} telefono={phone} correo={email} user={username} >{name}</option>
</React.Fragment>
))}
</Form.Control>
);
}
const handleChangePerson = (e) => {
const selectedIndex = e.target.options.selectedIndex;
const selectedUsername = e.target.options[selectedIndex].getAttribute('user')
const selectedEmail = e.target.options[selectedIndex].getAttribute('correo')
const selectedPhone = e.target.options[selectedIndex].getAttribute('telefono')
setState({...state, Persona: e.target.value, Idperson: selectedIndex, Usuario: selectedUsername, Email: selectedEmail,Telefono: selectedPhone})
}
return(
<>
<div>
<div className="Formulario">
<Container>
<div className="Formulario--title">
<h3>Selecciona una opcion</h3>
</div>
<Form.Group className="Formulario--group">
<Opciones></Opciones>
<Form.Control value={state.Usuario} onChange={handleChangePerson} disabled type="text"
placeholder="Usuario" />
<Form.Control value={state.Telefono} onChange={handleChangePerson} disabled type="text"
placeholder="Telefono" />
<Form.Control value={state.Email} onChange={handleChangePerson} disabled type="email"
placeholder="Email" />
</Form.Group>
</Container>
</div>
</div>
</>
)