Cannot get Typeahead value - reactjs

Question

I'm trying to create a tag input typeahead from this library:
import { Typeahead } from 'react-bootstrap-typeahead';
in my reactjs app:
<Typeahead
allowNew
id="custom-selections-example"
multiple
newSelectionPrefix="Add a new item: "
options={opt}
placeholder="Autocomplete"
name="tags"
onChange={onChange}
value={values.options}
/>
the statement console.log(values.options)-> does not return anything when I select one of the options...
Can someone show me a way to get the value?
UPDATE
I have previously tested with onChange function and gives the following error:
TypeError: Cannot read property 'name' of undefined
OnChange Method:
const { values, onChange, onSubmit } = useForm(createPostCallback, {
tags:''
})
const [createData, { error }] = useMutation(CREATE_QUERY, {
variables: values,...code continues

Answer 1

Here is the working code . https://codesandbox.io/s/wonderful-sanderson-eg0g8?file=/src/index.js:0-648. Here I modified the code based on your requirement, now you can call your parent onChange method from the handleChange method.
import React, { useEffect, useRef, useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import ReactDOM from 'react-dom';
import options from './data';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import './styles.css';
const TypeaheadExample = () => {
const [selected, setSelected] = useState([]);
const refHidden = useRef(null);
const onChange = (name) => (values) => {
if (values.length > 0) {
const e = new Event('input', { bubbles: true });
setNativeValue(refHidden.current, values[0].capital);
refHidden.current.dispatchEvent(e);
}
};
function setNativeValue(element, value) {
const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
const prototype = Object.getPrototypeOf(element);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(
prototype,
'value'
).set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
prototypeValueSetter.call(element, value);
} else {
valueSetter.call(element, value);
}
}
function handleChange(e) {
console.log(e.target.name);
console.log(e.target.value);
}
//{(text, e) => { console.log(text, e); }}
return (
<>
<Typeahead
id="basic-example"
onChange={onChange('basic')}
options={options}
placeholder="Choose a state..."
selected={selected}
/>
<input
ref={refHidden}
style={{ display: 'none' }}
name="control_Name"
onChange={handleChange}
/>
</>
);
};
ReactDOM.render(<TypeaheadExample />, document.getElementById('root'));

Answer 2

Unless I misunderstand what you are doing or there is missing code from your example, you want to set the values selected from that component correct?
Looking through the library's examples, it would seem like you don't have the onChange prop, where ideally you will set that value. So try this:
<Typeahead
allowNew
id="custom-selections-example"
multiple
newSelectionPrefix="Add a new item: "
options={opt}
placeholder="Autocomplete"
name="tags"
onChange={(value) => console.log('SET VALUE HERE!', value)}
value={values.options}
/>
Edit: take note for form related components in general, chances are you want to do anything relating to setting and storing values within the events (so onChange and possible variations of that).

Answer 3

From the documentation:
<Typeahead
allowNew
id="id"
multiple
newSelectionPrefix="Add a new item: "
options={opts}
placeholder="Autocomplete tags"
onChange={(selected) => { values.tags = selected }} />
The typeahead behaves similarly to other form elements. It requires an array of data options to be filtered and displayed.
<Typeahead
onChange={(selected) => {
// Handle selections...
}}
options={[ /* Array of objects or strings */ ]}
/>