React-select is not send in the request payload

Question

I'm using react-select with react-bootstrap, but it don't send the selected options in the select to the request payload, it only sends the first two inputs

I've tried lots of props as you can see in the code, but when I check the request payload it doesn't send the select

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Form from 'react-bootstrap/Form'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
import Select from 'react-select'

export default class CreateMembro extends Component {

  constructor(props) {
    super(props)
    this.state = {mem_nome: '', mem_data_nascimento: '', selectedOption: null, opcoes: []}

    this.handleFormInput = this.handleFormInput.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  getHostName() {
    return `http://${window.location.hostname}`
  }


  componentDidMount() {

    axios.get(`${this.getHostName()}/get-all-ministerios`).then((res) => {

      let response = []

      res.data.map(r => {
        r.value = r.min_nome
        r.label = r.min_descricao

        delete r.min_nome
        delete r.min_descricao
        delete r.min_id
        delete r.created_at
        delete r.updated_at
        response.push(r);
      })

      this.setState({ opcoes: response})
    })
  }

    handleChange(selectedOption) {
     this.setState({ selectedOption });
     console.log(selectedOption)
    }

    handleSubmit(event) {
    event.preventDefault()

    const dataForm = {
      mem_nome : this.state.mem_nome,
      mem_data_nascimento : this.state.mem_data_nascimento
    }

    axios.post(`${this.getHostName()}/membros`, dataForm).then((response) => {
      console.log(response.data)
    }).catch((error)=>{
       console.log(error)
    })
  }

  handleFormInput(event) {
    this.setState({
      [event.target.id]: event.target.value
    })

    console.log(event.target.id+'--'+event.target.value)
  }

    render() {
        return (
          <Container>
            <Row>
              <Col md={6}>
                <Form onSubmit={this.handleSubmit}>
                  <Form.Group>
                    <Form.Label>Nome do Membro</Form.Label>
                    <Form.Control id="mem_nome" type="text" placeholder="Nome do Membro" onChange={value = handleFormInput(value)} />

                    <Form.Label>Data de Nascimento</Form.Label>
                    <Form.Control id="mem_data_nascimento" type="date" placeholder="Data de Nascimento" onChange={value = handleFormInput(value)}/>

                    <Form.Label >Ministérios</Form.Label>


                      <Select
                        id="minid"
                        name="asdasd89NAMEEE"
                        ref="refsid"
                        inputId={"minresss"}
                        inputId="ministerios"
                        controlId="sdasd78gd"
                        isMulti={true}
                        labelKey="labelkeu"
                        isSearchable={true}
                        value={this.state.selectedOption}
                        onChange={value = handleChange(value)}
                        options={this.state.opcoes}
                        placeholder="Selecione o(s) ministério(s)">

                      </Select>



                  </Form.Group>
                  <Button type="submit" variant="primary">
                    Enviar
                  </Button>
                </Form>
              </Col>
            </Row>
          </Container>
        );
    }
}

I expect that the select values goes into the request payload.

Answer 1

I'm using the same library like you so you can take a look at mine code

I think your code should be change to something like this

change from this

 onChange={value = handleChange(value)}

to this

onChange={value => handleChange(value)}

and

const dataForm = {
      mem_nome : this.state.mem_nome,
      mem_data_nascimento : this.state.mem_data_nascimento,
      selectedOption: this.state.selectedOption  // you missing this
    }