Good night!
I’m making a delivery record and I wanted to consume a zip code api to automatically fill in the address, city, state and neighborhood fields using the ui material, I’m not able to put the information in the mentioned fields and when I take the auto focus off the zip code field disappear.
const checkZIPCODE = (event) => {
const zipCode = event.target.value.replace(/D/g, '');
console.log(zipCode);
fetch(`https://viacep.com.br/ws/${zipCode}/json/`)
.then(response => response.json())
.then(data => {
console.log(data)
setCEP('address', data.address)
setCEP('uf', data.uf)
setCEP('city', data.city)
setCEP('district', data.district)
})
}<NumberFormat
onChange={(event) => setZipCode(event.target.value)}
value={zipCode}
onBlur={validateFields}
error={!error.zipCode.valid}
helperText={error.zipCode.text}
name='zipCode'
mask={"_"}
customInput={TextField}
format={"#####-###"}
type="text"
variant="outlined"
id='zipCode'
label='ZIPCODE'
fullWidth
margin='normal'
required
/>
<TextField
value={address}
onChange={(event) => setAddress(event.target.value)}
onBlur={validateFields}
error={!error.address.valid}
helperText={error.address.text}
placeholder='Rua Barata Ribeiro'
id='address'
label='Address'
type='text'
name='address'
variant='outlined'
margin='normal'
fullWidth
required
/>
<TextField
style={{ marginRight: 25 }}
value={number}
onChange={(event) => setNumber(event.target.value)}
onBlur={validateFields}
error={!error.number.valid}
helperText={error.number.text}
placeholder='10'
id='number'
label='Number'
type='number'
name='number'
variant='outlined'
margin='normal'
required
/>
<TextField
value={uf}
onChange={(event) => setUf(event.target.value)}
onBlur={validateFields}
error={!error.uf.valid}
helperText={error.uf.text}
placeholder='RJ'
id='uf'
label='Uf'
type='text'
name='uf'
variant='outlined'
margin='normal'
required
/>
<TextField
style={{ marginRight: 25}}
value={city}
onChange={(event) => setCity(event.target.value)}
onBlur={validateFields}
error={!error.city.valid}
helperText={error.city.text}
placeholder='Rio de Janeiro'
id='city'
label='City'
type='text'
name='city'
variant='outlined'
margin='normal'
required
/>
<TextField
value={district}
onChange={(event) => setDistrict(event.target.value)}
onBlur={validateFields}
error={!error.district.valid}
helperText={error.district.text}
placeholder='Copacabana'
id='district'
label='District'
type='text'
name='district'
variant='outlined'
margin='normal'
required
/>