Hello there. How can i set the html "selected" attribute in a nextjs loop to prevent the notice "Use the defaultValue or value props on instead of setting selected on ."? handleChange(e)}> {categories?.map?.(({ name, slug, id }) => ( {name.replace('&', '&')} ))}

Set selected option in loop

Unanswered

Japanese Bobtail posted this in #help-forum

Japanese BobtailOP

2024-11-15T13:30:03.655Z

Hello there. How can i set the html "selected" attribute in a nextjs loop to prevent the notice "Use the defaultValue or value props on <select> instead of setting selected on <option>."?

<select onChange={(e) => handleChange(e)}>
    {categories?.map?.(({ name, slug, id }) => (
        <option key={id} value={slug} selected={currentCategory === slug}>
            {name.replace('&amp;', '&')}
        </option>
    ))}
</select>

1 Reply

Japanese BobtailOP

2024-11-15T13:49:13.779Z

I've solved this with:

<select onChange={(e) => handleChange(e)} value={currentCategory}>
    {categories?.map?.(({ name, slug, id }) => (
        <option key={id} value={slug}>
            {name.replace('&amp;', '&')}
        </option>
    ))}
</select>