on submit form, couldn't get react-select values - reactjs

Question

onSubmit(values) {
console.log("i m clicked", values); /// i didn't get form values
here.
}
renderMacros() {
const { handleSubmit } = this.props;
const macrosData = this.props.macros.macros;
const categoryMacrosData = this.props.categoryMacros.category;
console.log("categoryMacrosData", categoryMacrosData);
const { open } = this.state;
if (macrosData) {
return (
<div>
<div className="form-block-5 w-form">
<form
id="macros-form"
name="macros-form"
onSubmit={handleSubmit(this.onSubmit)}
>
<div className="row">
<div className="col-sm-12">
<label>Type</label>
<Field // this works fine
name="category"
options={MACRO_TYPE_CATEGORIES}
placeholder="Type"
component={SelectInput}
set_default="true"
/>
</div>
<div className="col-sm-12">
<Field // this works fine
name="name"
placeholder="Name Ex. Follow-up template"
component={renderField}
type="text"
className="text-fields w-input"
id="macros_name"
/>
</div>
<div className="col-sm-12">
<Field // here is the problem
type="text"
name="categoryId"
options={categoryMacrosData}
placeholder="Search or add category "
component={AsyncMulti}
handleSelect={this.handleSelectChange}
/>
</div>
</div>
<button>Create Macro</button>
</form>
</div>
</div>
);
}
}
Bottom line is if i use Creatable component of react-select library, i
couldn't get selected values.
My component file: components/Multi.js
import React from "react";
import CreatableSelect from "react-select/lib/Creatable";
const MultiSelect = props => {
const { options, handleSelect } = props;
return <CreatableSelect isMulti onChange={handleSelect} options=
{options} />;
};
export default MultiSelect;
I am using react-select for select options in redux form. After
submitting form, I am unable to get form submitted values.
I am using react-select library https://react-select.com/creatable with redux form.

Answer 1

Given a props name in <Select> like
<Select
name = {"inputName"} // <- if you submit the form you will get vale like {"inputName":test111}
options = {[{ value: 'test111', label: 'Chocolate' }]}
/>

Answer 2

You are not binding handleSubmit properly as well not using refs since you are not getting the values.
I suggest you to try with the binding code in your <form> tag:
<form
id="macros-form"
name="macros-form"
onSubmit={this.handleSubmit.bind(this)}
>
Also pass refs in your field tag to get the value:
<Field
name="categoryId"
options={categoryMacrosData}
placeholder="Search or add category "
component={Multi}
handleSelect={this.handleSelectChange}
ref="categoryId"
/>
Instead of writing onSubmit function:
onSubmit(values) {
console.log("i m clicked", values); /// i didn't get form values
here.
}
Replace it with this function code:
handleSubmit(event) {
if (this.refs.categoryId !== '') {
event.preventDefault();
console.log('categoryId: ', this.refs.categoryId.value)
}
}
Hope it helps you!