Level 16
You are passing hard-coded options to the component, but then expect to see dynamic ones upon form submission?..
What are you trying to achieve here?
Jan 22, 2022
10
Level 2
Show selected value in Select element from database using Inertia with React in Laravel
Hello, I have an edit form on a modal that shows user profile information. The modal triggers successfully. However, all the other fields show the stored values except for the <Select /> element.
This is the <Select /> component:
export default function Select({id, name, onChange, className, options, placeholder, required,}) {
return (
<>
<select
className={
`border-gray-300 focus:border-indigo-200 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-xl shadow-sm sm:text-sm` +
className
}
name={name}
required={required}
id={id}
onChange={onChange}>
<option>{placeholder}</option>
{options.map((option, index) => {
return (
<option key={index} value={option.value}>
{option.label}
</option>
);
})}
</select>
</>
);
}
On the frontend, this is what I have:
const genderSelection = [
{ value: "M", label: "Male" },
{ value: "F", label: "Female" },
];
<Select defaultValue={data.gender} onChange={handleChange} options={genderSelection}
className={`block w-full sm:text-sm`} placeholder={`Select gender`} name={`gender`}
/>
This is the onChange() event:
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
This is the useForm() data:
const { data, setData, processing, put, errors } = useForm({
name: auth.user.name,
email: auth.user.email,
gender: auth.user.gender,
mobile: auth.user.mobile_number,
});
The data in the <Select /> element gets updated when you submit the form, but it doesn't display the value from the database. Any help?
Level 2
@mabdullahsari how best can I do this 'cause the form an edit form showing user profile info? Every other form element is displaying the data, save for the <Select />.
Level 16
@Emokores Excuse me?
Level 2
@mabdullahsari I have an edit form on a modal. It has got input fields like name, email, mobile, gender and so on. The <Select /> element shows some data that's hard-coded, which is the gender field. However, whenever I open the form, the <Select /> component is empty but the rest of the form elements <Input /> display their data. I don't know why this is happening.
Level 102
You pass defaultValue to the Select component but never use it
Level 2
@Sinnbeck But I passed data.gender which was defined in my useForm() as auth.user.gender. How was I supposed to deal with it? Even when I change the prop to value={data.gender} it still doesn't show the value.
Level 102
@Emokores in this component it isn't used
Here i added value
export default function Select({id, name, onChange, className, options, placeholder, required, value }) {
return (
<>
<select
value={value} //added
className={
`border-gray-300 focus:border-indigo-200 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-xl shadow-sm sm:text-sm` +
className
}
name={name}
required={required}
id={id}
onChange={onChange}>
<option>{placeholder}</option>
{options.map((option, index) => {
return (
<option key={index} value={option.value}>
{option.label}
</option>
);
})}
</select>
</>
);
}
1 like
Level 2
@Sinnbeck I can laugh at myself all day 'cause of this! I didn't pass the value prop in the component. It now works well as expected. Thanks for the clue.
export default function Select({
id,
name,
onChange,
className,
options,
value, //I missed out this
placeholder,
required,
}) {
return (
<>
<select
className={
`border-gray-300 focus:border-indigo-200 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-xl shadow-sm sm:text-sm` +
className
}
name={name}
required={required}
id={id}
onChange={onChange}
value={value} //So I had to pass it here too
>
<option>{placeholder}</option>
{options.map((option, index) => {
return (
<option key={index} value={option.value}>
{option.label}
</option>
);
})}
</select>
</>
);
}
Level 102
@Emokores exactly. Sorry I couldn't format it. On a mobile phone :)
1 like
Please or to participate in this conversation.