Wsrtjtyk

I have tried following code, but it sets & gets the entire json of the selected value. How to set & get only the value of the selectedOption & not the entire json of the selectedOption from state after the selection. The code given in the the official documentation is given below:

import React from 'react';

import Select from 'react-select';



const options = [

  { value: 'chocolate', label: 'Chocolate' },

  { value: 'strawberry', label: 'Strawberry' },

  { value: 'vanilla', label: 'Vanilla' }

];



class App extends React.Component {

  state = {

    selectedOption: null,

  }

  handleChange = (selectedOption) => {

    this.setState({ selectedOption });

    console.log(`Option selected:`, selectedOption);

  }

  render() {

    const { selectedOption } = this.state;



    return (

      <Select

        value={selectedOption}

        onChange={this.handleChange}

        options={options}

      />

    );

  }

}

you should bind handleChange in constructor

because react-reselect by default bind all methods in code line https://github.com/JedWatson/react-select/blob/master/.babelrc#L4

transform-class-properties in .babelrc bind by default

Do bind like this:
https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

And the answer to your question here:

import React from 'react';

import Select from 'react-select';



const options = [

  { value: 'chocolate', label: 'Chocolate' },

  { value: 'strawberry', label: 'Strawberry' },

  { value: 'vanilla', label: 'Vanilla' }

];



class App extends React.Component {

  state = {

    selectedOption: null,

  }

  constructor() {

    this.handleChange = this.handleChange.bind(this)

  }

  handleChange = (selectedOption) => {

    console.log('selectedOption', selectedOption); // log here before set state

    this.setState({ selectedOption });

    console.log(`Option selected:`, selectedOption);

  }

  render() {

    const { selectedOption } = this.state;



    return (

      <Select

        value={selectedOption}

        onChange={this.handleChange}

        options={options}

      />

    );

  }

}

Extract selected value and pass to handler

   onChange={(e) => this.handleChange(e.value)}

...

    import React from 'react';

    import Select from 'react-select';



    const options = [

      { value: 'chocolate', label: 'Chocolate' },

      { value: 'strawberry', label: 'Strawberry' },

      { value: 'vanilla', label: 'Vanilla' }

    ];



    class App extends React.Component {

      state = {

        selectedOption: null,

      }

      handleChange = (selectedOption) => {

        this.setState({ selectedOption });

        console.log(`Option selected:`, selectedOption);

      }

      render() {

        const { selectedOption } = this.state;



        return (

          <Select

            value={selectedOption}

            onChange={(e) => this.handleChange(e.value)}

            options={options}

          />

        );

      }

    }