How is handleChange receiving props? React - reactjs

Question

I know it might be a similar question. But I cannot seem to find its solution. The code works perfectly fine. Whenever onChange function gets called. It is receiving selectionOption as props. But what are we passing in our this.handleChange? I tried passing e.target.value but it doesn't work. How is this code working? For example this is something im trying to implement to understand its logic. onChange = {(e)=>this.handleChange(e.target.value)}. But this doesnt work.
Example.js
import React from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";
import { stateOptions } from "./docs/data";
const options = [
{ value: "alabama", label: "Alabama" },
{ value: "florida", label: "Florida" },
{ value: "idaho", label: "Idaho" },
{ value: "washington", label: "Washington" },
{ value: "illinois", label: "Illinois" },
{ value: "vermont", label: "Vermont" }
];
export default class Example extends React.Component {
state = {
selectedOption: ""
};
handleChange = selectedOption => {
this.setState({ selectedOption });
// selectedOption can be null when the `x` (close) button is clicked
if (selectedOption) {
console.log(`Selected: ${selectedOption.label}`);
}
};
render() {
const { selectedOption } = this.state;
return (
<Select
multi={true}
name="colors"
value={selectedOption}
// what are we sending in this handleChange and how?
onChange={this.handleChange}
options={stateOptions}
/>
);
}
}

Answer 1

// what are we sending in this handleChange and how?
onChange={this.handleChange}
Your code is not in charge of that. It's up to react-select to pass a value in, and they do so on this line of code in their code base:
onChange(newValue, actionMeta);
So react-select passes in the new value as the first argument, and something called actionMeta as the second argument. All you need to do is tell react-select what function it should send that data to, which you do with the code onChange={this.handleSelect}

Answer 2

The string in the "value" field is passed.
Your handle function should expect a string:
handleChange = selectedOption(newValue:string) => {
//do something with this value here
};
in this case the value corresponds to the "value" here:
const options = [
{ value: "alabama", label: "Alabama" },
{ value: "florida", label: "Florida" },
{ value: "idaho", label: "Idaho" },
{ value: "washington", label: "Washington" },
{ value: "illinois", label: "Illinois" },
{ value: "vermont", label: "Vermont" }
];