👀 Views: 1646 💬 Answers: 1 📅 Created: 2025-06-14

react react-select custom-component javascript

I'm a bit lost with I'm maintaining legacy code that I'm testing a new approach and I've tried everything I can think of but This might be a silly question, but I've been banging my head against this for hours. I'm using React Select (version 5.2.0) to create a custom dropdown for selecting user roles in my application. However, I'm encountering an issue where the selected value does not update the state correctly when I'm using a custom option component. My component looks like this: ```javascript import Select from 'react-select'; const CustomOption = (props) => { return <div style={{ padding: '10px', cursor: 'pointer' }} {...props.innerProps}>{props.data.label}</div>; }; const RoleSelector = () => { const roles = [ { value: 'admin', label: 'Admin' }, { value: 'editor', label: 'Editor' }, { value: 'viewer', label: 'Viewer' } ]; const [selectedRole, setSelectedRole] = useState(null); const handleChange = (selected) => { setSelectedRole(selected); console.log('Selected role:', selected); }; return ( <Select options={roles} components={{ Option: CustomOption }} onChange={handleChange} /> ); }; ``` When I select an option from the dropdown, the `handleChange` function gets invoked, and it properly logs the selected role in the console. However, the `selectedRole` state does not seem to reflect the change in the UI, and the placeholder remains visible instead of showing the selected value. I've tried using the `value` prop on the Select component like this: ```javascript <Select options={roles} components={{ Option: CustomOption }} onChange={handleChange} value={selectedRole} /> ``` But still, the UI does not update as expected. Moreover, if I directly return the custom component without spreading `innerProps`, the dropdown does not function properly (no hover effect, etc.). I am unsure if I'm missing any key aspects of how React Select manages the selected value when using custom components. Any help would be appreciated! For context: I'm using Javascript on macOS. My development environment is Linux. How would you solve this? How would you solve this? I'm working on a application that needs to handle this. Any suggestions would be helpful. I'm coming from a different tech stack and learning Javascript.