this.state.value returning Undefined when it is changed

Question

I am developing a system and a part of it will be register and edit the schedules, I am able to return the data of times on the screen, but when I try to edit and click on the button to give an UPDATE in the database this.set.value returns Undefined, follows my code.

import React, { Component } from 'react';
import { Button } from 'reactstrap';

import './index.css';

export default class HorarioFuncionamento extends Component {

    constructor() {
        super();
        this.state = {        
            horariosSeg: {},
            horariosTer: {},
            horariosQua: {},
            horariosQui: {},
            horariosSex: {},
            horariosSab: {},
            horariosDom: {},

            valueSeg: '',
            valueHorUuidSeg: '',
            valueHorIniSeg: '',
            valueHorFimSeg: '',
            valueHorTemEntSeg: '',

            valueTer: '',
            valueHorUuidTer: '',
            valueHorIniTer: '',
            valueHorFimTer: '',
            valueHorTemEntTer: '',

            valueQua: '',
            valueHorUuidQua: '',
            valueHorIniQua: '',
            valueHorFimQua: '',
            valueHorTemEntQua: '',

            valueQui: '',
            valueHorUuidQui: '',
            valueHorIniQui: '',
            valueHorFimQui: '',
            valueHorTemEntQui: '',

            valueSex: '',
            valueHorUuidSex: '',
            valueHorIniSex: '',
            valueHorFimSex: '',
            valueHorTemEntSex: '',

            valueSab: '',
            valueHorUuidSab: '',
            valueHorIniSab: '',
            valueHorFimSab: '',
            valueHorTemEntSab: '',

            valueDom: '', 
            valueHorUuidDom: '',
            valueHorIniDom: '',
            valueHorFimDom: '',
            valueHorTemEntDom: '',           
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            valueSeg: event.target.valueSeg,
            valueHorUuidSeg: event.target.valueHorUuidSeg,
            valueHorIniSeg: event.target.valueHorIniSeg,
            valueHorFimSeg: event.target.valueHorFimSeg,
            valueHorTemEntSeg: event.target.valueHorTemEntSeg,

            valueTer: event.target.valueTer,
            valueHorUuidTer: event.target.valueHorUuidTer,
            valueHorIniTer: event.target.valueHorIniTer,
            valueHorFimTer: event.target.valueHorFimTer,
            valueHorTemEntTer: event.target.valueHorTemEntTer,

            valueQua: event.target.valueQua,
            valueHorUuidQua: event.target.valueHorUuidQua,
            valueHorIniQua: event.target.valueHorIniQua,
            valueHorFimQua: event.target.valueHorFimQua,
            valueHorTemEntQua: event.target.valueHorTemEntQua,

            valueQui: event.target.valueQui,
            valueHorUuidQui: event.target.valueHorUuidQui,
            valueHorIniQui: event.target.valueHorIniQui,
            valueHorFimQui: event.target.valueHorFimQui,
            valueHorTemEntQui: event.target.valueHorTemEntQui,

            valueSex: event.target.valueSex,
            valueHorUuidSex: event.target.valueHorUuidSex,
            valueHorIniSex: event.target.valueHorIniSex,
            valueHorFimSex: event.target.valueHorFimSex,
            valueHorTemEntSex: event.target.valueHorTemEntSex,

            valueSab: event.target.valueSab,
            valueHorUuidSab: event.target.valueHorUuidSab,
            valueHorIniSab: event.target.valueHorIniSab,
            valueHorFimSab: event.target.valueHorFimSab,
            valueHorTemEntSab: event.target.valueHorTemEntSab,

            valueDom: event.target.valueDom,
            valueHorUuidDom: event.target.valueHorUuidDom,
            valueHorIniDom: event.target.valueHorIniDom,
            valueHorFimDom: event.target.valueHorFimDom,
            valueHorTemEntDom: event.target.valueHorTemEntDom,
        });
    }

    componentDidMount() {
        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(horarios => this.setState({ 
            horariosSeg: horarios.horarios[1],
            horariosTer: horarios.horarios[2],
            horariosQua: horarios.horarios[3],
            horariosQui: horarios.horarios[4],
            horariosSex: horarios.horarios[5],
            horariosSab: horarios.horarios[6],
            horariosDom: horarios.horarios[0],

            valueSeg: horarios.horarios[1].hor_dia,
            valueHorUuidSeg: horarios.horarios[1].horario_uuid,
            valueHorIniSeg: horarios.horarios[1].hor_inicio,
            valueHorFimSeg: horarios.horarios[1].hor_fim,
            valueHorTemEntSeg: horarios.horarios[1].hor_tempo_entrega_estimado,

            valueTer: horarios.horarios[2].hor_dia,
            valueHorUuidTer: horarios.horarios[2].horario_uuid,
            valueHorIniTer: horarios.horarios[2].hor_inicio,
            valueHorFimTer: horarios.horarios[2].hor_fim,
            valueHorTemEntTer: horarios.horarios[2].hor_tempo_entrega_estimado,

            valueQua: horarios.horarios[3].hor_dia,
            valueHorUuidQua: horarios.horarios[3].horario_uuid,
            valueHorIniQua: horarios.horarios[3].hor_inicio,
            valueHorFimQua: horarios.horarios[3].hor_fim,
            valueHorTemEntQua: horarios.horarios[3].hor_tempo_entrega_estimado,

            valueQui: horarios.horarios[4].hor_dia,
            valueHorUuidQui: horarios.horarios[4].horario_uuid,
            valueHorIniQui: horarios.horarios[4].hor_inicio,
            valueHorFimQui: horarios.horarios[4].hor_fim,
            valueHorTemEntQui: horarios.horarios[4].hor_tempo_entrega_estimado,

            valueSex: horarios.horarios[5].hor_dia,
            valueHorUuidSex: horarios.horarios[5].horario_uuid,
            valueHorIniSex: horarios.horarios[5].hor_inicio,
            valueHorFimSex: horarios.horarios[5].hor_fim,
            valueHorTemEntSex: horarios.horarios[5].hor_tempo_entrega_estimado,

            valueSab: horarios.horarios[6].hor_dia,
            valueHorUuidSab: horarios.horarios[6].horario_uuid,
            valueHorIniSab: horarios.horarios[6].hor_inicio,
            valueHorFimSab: horarios.horarios[6].hor_fim,
            valueHorTemEntSab: horarios.horarios[6].hor_tempo_entrega_estimado,

            valueDom: horarios.horarios[0].hor_dia,
            valueHorUuidDom: horarios.horarios[0].horario_uuid,
            valueHorIniDom: horarios.horarios[0].hor_inicio,
            valueHorFimDom: horarios.horarios[0].hor_fim,
            valueHorTemEntDom: horarios.horarios[0].hor_tempo_entrega_estimado,
        })
        )
        .catch(e => console.log(e));
    }

    updateHor = () => {
        alert("Horário inicio no domingo => " + this.state.valueHorIniDom);
    }

    render() {
        return (            
            <form>
                <fieldset>
                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidDom } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueDom } onChange={this.handleChange} 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={ this.state.valueHorIniDom } onChange={this.handleChange} />
                        </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={ this.state.valueHorFimDom } onChange={this.handleChange} />
                        </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={ this.state.valueHorTemEntDom } onChange={this.handleChange} />
                        </div>
                    </fieldset>  
                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSeg } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSeg } onChange={this.handleChange} 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={ this.state.valueHorIniSeg } onChange={this.handleChange} />
                        </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={ this.state.valueHorFimSeg } onChange={this.handleChange} />
                        </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={ this.state.valueHorTemEntSeg } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidTer } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueTer } onChange={this.handleChange} 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={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidQua } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueQua } onChange={this.handleChange} 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={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidQui } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueQui } onChange={this.handleChange} 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={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSex } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSex } onChange={this.handleChange} 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={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSab } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSab } onChange={this.handleChange} 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={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </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={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </div>
                    </fieldset>  
                </fieldset>
                <Button color="primary" block style={{ width: "100%", marginTop: "15px" }} onClick={this.updateHor}> Entrar </Button>
            </form>
        );
    }
}

Answer 1

There is no Event.target.XXX properties that you wrote.

For your case, just make handleChange a function that returns another function. The property name can be passed as the argument for the creation of Handler.

For example:

<input onChange={this.handleChange('valueSeg')} />

Where:

handleChange(propriedade) {
  return (event) => {
    this.setState({
      [propriedade]: event.target.value,
    });
  };
}

Here’s a pro tip: if you’re writing something repetitive many, many times, it’s probably a sign that something isn’t right. Remember that developers always look for smart solutions (or in other words, "lazy").