Estou com uma questão ao receber os dados do banco para os meus checkboxes. Mesmo o valor vindo false
do banco, o checkbox fica marcado.
Já tentei várias respostas de fóruns mas devo estar deixando passar alguma coisa.
Recebo o json do banco e faço o looping usando map
com cada key
correspondente.
No caso abaixo, host.host
seria equivalente ao json retornado de res.data.host
:
data: {
host: "false"
}
Home.js
function Home() {
const { handleSubmit, register, errors } = useForm()
const [users, setUsers] = useState([])
const [file, setFile] = useState('')
useEffect(() => {
async function loadUser() {
const userId = localStorage.getItem('id')
const res = await axios.post(`${process.env.REACT_APP_GET_USER_DATA_URL}/react-getUserData.php`, { userId })
console.log(res)
setUsers([...users, res.data])
}
loadUser()
register({ name: 'file' })
}, [register])
function handleChange(e) {
const isChecked = e.target.checked
console.log(isChecked)
}
...
return (
<>
<label className="btn btn-circle border filters-btn">
{users.map((host) => (
<input
type="checkbox"
name="host"
id="host"
key={host}
defaultChecked={host.host}
ref={register}
onChange={handleChange}
/>
))}
<i></i>
<span>Hospedagem</span>
</label>
host
tá em texto então é true mesmo, precisa serhost: false
para fazer o efeito esperado, ou seja, o tipo que está atrapalhando no seu desenvolvimento.