saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.14k stars 1.3k forks source link

docs: JSX Example Code of `Select` Causing Warning in React #3287

Open jlzhjp opened 9 hours ago

jlzhjp commented 9 hours ago

On which page do you see this issue?

https://daisyui.com/components/select/

Describe the issue

Hi, Thank you for this great library! In the provided jsx example code from the documentation, the <select> element uses the selected attribute directly on an <option> tag, which is not recommended in React.

<select className="select w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option>
  <option>Bart</option>
  <option>Lisa</option>
  <option>Maggie</option>
</select>

This results in the following warning:

Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Here's a link to the react documentation: https://react.dev/reference/react-dom/components/select#providing-an-initially-selected-option

What browsers are you seeing the problem on?

All browsers

github-actions[bot] commented 9 hours ago

Thank you @jlzhjp for reporting issues. It helps daisyUI a lot ๐Ÿ’š
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.