Let’s say I have a React Select with a placeholder (‘Selected Value: ‘), and I want to keep the placeholder and append it into the selected value so that it looks something like (‘Selected Value: 1’). Is there any way to do it?
import Select from "react-select";
export default function App() {
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 },
{ value: 4, label: 4 }
];
const placeholder = "Selected Value: ";
return (
<div className="App">
<Select options={options} placeholder={placeholder} />
</div>
);
}
codesandbox: https://codesandbox.io/s/brave-chatterjee-pjol2d?file=/src/App.js:23-385
EDIT: Sorry, forget to mention, I do not want the placeholder to directly be in the labels of the options
>Solution :
you can accept my answer
import Select from "react-select";
import { useState } from "react";
export default function App() {
const [selectBoxValue, setSelectBoxValue] = useState('')
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 },
{ value: 4, label: 4 }
];
const placeholder = `Selected Value: ${selectBoxValue}`;
return (
<div className="App">
<Select
options={options}
placeholder={placeholder}
value={placeholder}
onChange={(event) => setSelectBoxValue(event.value)} />
</div>
);
}