# post-carousel/4.0.4/src/components/multipleSelect/multipleSelect.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.4. 50 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.4/code/src/components/multipleSelect/multipleSelect.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.4/raw/src/components/multipleSelect/multipleSelect.js
- Modified: 2026-04-24T11:48:54+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.4/code/src/components/multipleSelect/multipleSelect.js#L10-L20`.

```javascript
import Select from "react-select";
import "./editor.scss";

const MultipleSelect = ({
	attributes,
	setAttributes,
	attributesKey,
	label,
	items,
	objectData = false,
	value = false,
	onChange = false,
	flex = false,
	reset = false,
	onInputChange = false,
	helpText = "",
}) => {
	const defaultValues = items?.filter((f) => attributes.includes(f.value));
	const updateValue = (data) => {
		if (objectData) {
			const updatedValues = data?.map((d) => {
				return { value: d.value, type: d.type };
			});
			setAttributes({ [attributesKey]: updatedValues });
		} else {
			const updatedValues = data?.map((d) => d.value);
			setAttributes({ [attributesKey]: updatedValues });
		}
	};

	return (
		<div className={`sp-smart-post-multi-select ${flex ? "d-flex" : ""} sp-smart-post-component-mb`}>
			<p className="sp-smart-post-component-title">{label}</p>
			<Select
				defaultValue={value ? value : defaultValues}
				// value={ value ?? defaultValues }
				isMulti
				options={items}
				isClearable={reset}
				onChange={(data) => (onChange ? onChange(data) : updateValue(data))}
				onInputChange={(e) => (onInputChange ? onInputChange(e) : "")}
				className="sp-smart-post-basic-multi-select"
			/>
			{helpText && <p className="sp-smart-help-text">{helpText}</p>}
		</div>
	);
};

export default MultipleSelect;

```