Tengo estos datos de ejemplo:
export const data = [ { state: "state", firstName: "Alex", lastName: "Dhan", country: "US" }, { state: "state2", firstName: "Pin", lastName: "Io", country: "Japan" }, { state: "state3", firstName: "Third", lastName: "last name3", country: "South Korea" }, { state: "state4", firstName: "Alex", lastName: "Kin", country: "South Korea" }, { state: "state5", firstName: "Alex", lastName: "Kin", country: "India" } ];¿Cómo puedo hacer coincidir el nombre y el apellido que ingresó el usuario y luego hacer que también se llenen automáticamente los otros campos de texto? También puede haber casos en los que los nombres sean los mismos o el nombre y el apellido sean los mismos pero el estado y el país sean diferentes. ¿Cómo puedo hacer esto?
Codesandbox recreado: https://codesandbox.io/s/textfield-with-search-f2fjx1?file=/data.js:0-513
<form onSubmit={handleSubmit}> <TextField variant="outlined" label="First Name" fullWidth value={firstName} onChange={(e) => setFirstName(e.target.value)} required /> <TextField variant="outlined" label="Last Name" fullWidth value={lastName} onChange={(e) => setLastName(e.target.value)} required /> <TextField variant="outlined" label="State" fullWidth value={state} onChange={(e) => setState(e.target.value)} required /> <br /> <br /> <button type="submit">Submit</button> <br /> </form>usa useEffect . allí hacer todas las comprobaciones necesarias. o todos los mismos cheques en submit
useEffect(() => { const res = Object.values(data).filter(item => { /* check for matches here */ return item.firstName === firstName && item.lastName === lastName }); if(res.length === 1 && !state) { /* fill in the required fields here */ setState(res[0].state) } /** here you specify the necessary dependencies (which will be in the filter) */ }, [firstName, lastName]);