[ReactJS]

Fiz um onChange, só que parece que não está correto pois ele não está deixando eu editar, só ficar o valor do value.

import React, { useState, useEffect } from 'react';

import './index.css';

export const HorarioFuncionamento = () => {
const [horarios, setHorario] = useState([]);

const [horariosFunc, setHorariosFunc] = useState({
hor_inicio: '',
hor_fim: '',
hor_tempo_entrega_estimado: '',
});

const valueInput = e => setHorariosFunc({ ...horariosFunc, [e.target.name]: e.target.value });

const getHorarioFuncionamento = async () => {
const token = localStorage.getItem('token');

const requestInfo = {
method: 'GET',
headers: new Headers({
'Authorization': `Bearer ${token}`
}),
};

fetch("http://localhost:8080/api/v1/horario-funcionamento", requestInfo, {
setTimeout: 3000
})
.then(response => {
if(response.ok) {
return response.json();
}
throw new Error('Opss! Ocorreu um erro. ');
})
.then((responseJson) => (
setHorario(responseJson.horarios)
))
.catch(e => console.log(e));
}

useEffect(() => {
getHorarioFuncionamento();
},[]);


return(
<form>
<fieldset>
{Object.values(horarios).map(horario => (
<fieldset className="grupo">
<div className="campo" hidden={true}>
<label htmlFor="dia">HorUUID</label>
<input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ horario.horario_uuid } readOnly={true} />
</div>
<div className="campo">
<label htmlFor="dia">Dia</label>
<input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ horario.hor_dia } readOnly={true} />
</div>
<div className="campo">
<label htmlFor="hor-ini">Horário Ínicio</label>
<input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ horario.hor_inicio } onChange={ valueInput } />
</div>
<div className="campo">
<label htmlFor="hor-fim">Horário Fim</label>
<input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ horario.hor_fim } onChange={ valueInput } />
</div>
<div className="campo">
<label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
<input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ horario.hor_tempo_entrega_estimado } onChange={ valueInput } />
</div>
</fieldset>
))}
</fieldset>
</form>
);
}

Continue reading...