Undefined payload value React semantic ui

Question

I am trying to use the semantic-ui form.select but am getting Undefined on my payload:

What I tried to:

<Form.Select
    fluid
    label='Gender'
    options={workoutOptions}
    placeholder='Atividades'
    onChange={this.props.changeTipoTarefa}
    value={this.props.tipoTarefa}
/>

I set that constant outside my class:

const workoutOptions = [
    { text: 'Run', value: 'run' },
    { text: 'Swimming', value: 'swimming' },
    { text: 'Bike', value: 'bike' },
]

My brother:

const INITIAL_STATE = { tempoGasto: '', tipoTarefa: '', data: '', list: [] }

export default (state = INITIAL_STATE, action) => {
    console.log(action.type)
    console.log(action)
    switch(action.type) {
        case 'TEMPOGASTO_CHANGED':
            return { ...state, tempoGasto: action.payload }
        case 'TIPOATIVIDADE_CHANGED':
            return { ...state, tipoTarefa: action.payload }
        case 'DATATAREFA_CHANGED':
            return { ...state, changeDataTarefa: action.payload }
        case 'WORKOUT_SEARCHED':
            return { ...state, list: action.payload }
        default:
            return state
    }
}

I am receiving Undefined as shown on my console.:

TIPOATIVIDADE_CHANGED

payload: Undefined

type: "TIPOATIVIDADE_CHANGED"

How can I get the selected value in select?

export const changeTipoTarefa = event => ({
    type: 'TIPOATIVIDADE_CHANGED',
    payload: event.target.value
})

I suppose there in payload: Event.target.value is the problem, but I don’t know what to replace.

Answer 1

From what I saw of your code, when the "Onchange" event of your "Select" occurs it executes the Reset. The problem is that it does not send the value. One way to solve this would be to create a function to treat the "onChange", retrieve the value and call the Reducer. Your code would look like this:

class MinhaClasse extends Component {
  
  alterar = e => {
    this.props.changeTipoTarefa(e.target.value);
  };

  render() {
    const { email, password } = this.state;
    return (

<Form.Select
    fluid
    label='Gender'
    options={workoutOptions}
    placeholder='Atividades'
    onChange={this.alterar}
    value={this.props.tipoTarefa}
/>

)
}
}

In your Reducer, you would receive the value as follows:

export const changeTipoTarefa = valor => ({
    type: 'TIPOATIVIDADE_CHANGED',
    payload: valor
})