I am using the React Bootstrap Typeahead and I have gotten it to work with the options that I want, which is okay.
Now I need to add a button to the end of the dropdown list that allows for a custom action, not necessarily as an option to select.
Please view the images below for examples of what I'm hoping to accomplish.
I tried playing with the renderMenu
prop, but that fails, since it expects only options to be returned in the dropdown menu. Also tried to using custom js to add it dynamically but no luck there either.
class MyTypeahead extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedOption: [],
};
}
handleButtonClick = () => {
// Handle the button click event
// You can add your logic here
};
render() {
return (
<Typeahead
id="my-typeahead"
multiple={false}
options={[
'Option 1',
'Option 2',
'Option 3',
'Option 4',
// Add your options here
]}
selected={this.state.selectedOption}
onChange={(selected) => this.setState({ selectedOption: selected })}
renderMenu={(results, menuProps) => (
<div>
{results.map((result, index) => (
<div key={index}>
{/* Render each option */}
{this.props.renderMenuItemChildren(result, menuProps)}
</div>
))}
{/* Add your custom button */}
<Button variant="primary" onClick={this.handleButtonClick}>
Custom Button
</Button>
</div>
)}
renderMenuItemChildren={(option, props, index) => (
<span>{option}</span>
)}
/>
);
}
}
export default MyTypeahead;
The handleButtonClick method is called when the custom button is clicked, and you can add your logic there.We use the renderMenu prop to customize the rendering of the dropdown menu. Inside this function, we map through the results array and render each option