React-select multi select update a prop when no value is selected

I am using react-select library to create a multi-selection menu. When there is no value selected I want a certain style width to be used on the div and when a user starts selecting values from the select dropdown, I want this width to be set to null so that the select component can use it’s own auto adjusting width capability. I have the below code but I can’t get the width to update synchronously as it updates after the next render call. Not sure how to make it update with the new width immediately. I know setState is async but if you use a callback in the setState function I would imagine it would render with the new state.

...
constructor(props) {
    super(props);
    this.state = {
        dropBoxWidth: { width: 130 },
        selectLength: 1
    }
}
.....
handleChange = selectedOption => {
    if (this.state.selectLength > 0) {
        this.setState(
            { selectedOption, selectLength: selectedOption.length, dropBoxWidth: null },
            () => console.log(`Option selected:`, this.state.selectedOption, this.state.selectLength, this.state.dropBoxWidth)
        );
    } else {
        this.setState({ dropBoxWidth: { width: 130 }, selectLength: 1 }), () =>
            console.log("New Dropbox Width ", this.state.dropBoxWidth)
    }

};
render() {
    return (
        <div style={this.state.dropBoxWidth}>
            <Select
                closeMenuOnSelect={false}
                isMulti
                options={aList}
                onChange={this.handleChange}
                placeholder="Item Select"
            />
        </div>
    )
}

Again to be clear, I want the style width of the div to be set to 130 when there is no value selected. This can be when the page is opened or refreshed(constructor props has the width to 130), and if a user selects values then decides to clear all the selections from the menu.

Answer

You can use inital state in styles of component.

<Select
  options={options}
  styles={{
    container: (provided, state) => ({
      ...provided,
      width: !state.hasValue && "130px",
      borderBottom: "1px dotted pink"
    })
  }}
/>

Like here: https://codesandbox.io/s/amazing-dawn-xwcld?file=/src/App.js:290-517

React select styles doc: https://react-select.com/styles

Advertisement

Answer