Can't show a value with Creatable react-select - reactjs

Question

I'm using react-select along with material-ui to make a autocomplete component that looks and functions like the material ones.
I followed the basic setup here
https://material-ui.com/demos/autocomplete/
And then had to tweak to my setup with the data structure the way our API handles, this all works great but now I'm trying to allow the user to create a new option and I can't seem to get it to display the option back
Here is the component as is
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import styles from "./styles";
import MenuItem from '#material-ui/core/MenuItem';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Typography from '#material-ui/core/Typography';
import ArrowDropDownIcon from '#material-ui/icons/ArrowDropDown';
import ArrowDropUpIcon from '#material-ui/icons/ArrowDropUp';
import Input from '#material-ui/core/Input';
import LinearProgress from '#material-ui/core/LinearProgress';
import classNames from 'classnames';
class Option extends React.Component {
handleClick = event => {
this.props.onSelect(this.props.option, event);
};
render() {
const { children, isFocused, isSelected, onFocus } = this.props;
return (
<MenuItem
onFocus={onFocus}
selected={isFocused}
disabled={isSelected}
onClick={this.handleClick}
component="div"
style={{
fontWeight: isSelected ? 500 : 400,
}}
>
{children}
{children === 'LOADING...' &&
<LinearProgress style={{ position: 'absolute',width: '100%',bottom: '0',left: '0',height: '2px', }} />
}
</MenuItem>
);
}
}
class SelectWrapped extends Component {
render() {
const { classes, ...other } = this.props;
return (
<Select
optionComponent={Option}
noResultsText={<Typography>{'No results found'}</Typography>}
clearRenderer={() => {}}
arrowRenderer={arrowProps => {
return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
}}
valueComponent={valueProps => {
const { children } = valueProps;
console.log(children)
return <div className="Select-value">{children}</div>;
}}
{...other}
/>
);
}
}
class SelectCreatable extends Component {
render() {
const { classes, ...other } = this.props;
console.log(this.props)
return (
<Select.Creatable
optionComponent={Option}
noResultsText={<Typography>{'No results found'}</Typography>}
clearRenderer={() => {}}
arrowRenderer={arrowProps => {
return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
}}
valueComponent={valueProps => {
const { children } = valueProps;
return <div className="Select-value">{children}</div>;
}}
{...other}
/>
);
}
}
class AutoCompleteComponent extends Component {
state = {
value: null,
};
handleChange = value => {
this.setState({ value: value })
const foundSuggestion = this.props.suggestions.find((s) => s.id === value);
if (this.props.creatable) {
this.props.onChange(foundSuggestion || {
[this.props.labelPropName]: value
})
} else {
this.props.onChange(foundSuggestion)
}
}
onChange = value => {
this.props.onChange(this.props.suggestions.find((s) => s.id === value))
};
render() {
const { classes, labelPropName, creatable } = this.props;
const suggestions = this.props.suggestions.map(suggestion => ({
value: suggestion.id,
label: this.props.labelFunction(suggestion)
}))
return (
<div className={classNames(classes.root,this.props.className)}>
<Input
fullWidth
inputComponent={creatable ? SelectCreatable : SelectWrapped}
value={this.state.value}
onChange={(value) => this.props.showValue ? this.handleChange(value) : this.onChange(value)}
placeholder={this.props.placeholder}
classes={{
input: classes.input,
...this.props.InputClasses
}}
inputProps={{
classes,
simpleValue: true,
options: suggestions
}}
/>
</div>
);
}
}
export default withStyles(styles, { withTheme: true })(AutoCompleteComponent);
I setup a stackblitz with a running example and some options. If you type and select an option you'll see it display the selected option, but if you type a new one and hit enter it doesn't display the option and I'm trying to figure out why, some help on what I'm doing wrong here would be super helpful
https://wmazc4.stackblitz.io

Answer 1

I thinks the bug is with your data conversion id to value messes with your react-select component
I went through a demo from an exact copy of your code (since your example wasn't working)
here is my example: https://codesandbox.io/s/p9j3xz843m
here I used
inputProps={{
classes,
name: "react-select-single",
instanceId: "react-select-single",
simpleValue: true,
options: colourOptions,
valueKey: "id",
labelKey: "label"
}}
find that I used valueKey and labelKey props to convert data you can find more from the live example
hope this will help you. please let me know if you want more clarifications.