server html as children to client component
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
<ToAskModal>
<button
className="inline-flex items-center bg-blue-700 text-slate-100 border-0 py-1 px-3 focus:outline-none rounded text-base"
>
<AiOutlinePlus className="mr-2" />
To Ask
</button>
</ToAskModal>ToAskModal is a shadCN dialog,
i am trying to pass a button as children to ToAskModal which is a client component, its working but throwing some hydration errors, so am i doing it wrong or missing something ?
i simply dont wanna create a 'use client' component for only this btn, is there any work around or i am approaching this wrongly.
Answered by joulev
most likely you nested <button> inside another <button> which is invalid html
4 Replies
Sloth bearOP
so button tag was the problem, i changed it to div and it worked, why does it not work with button ? am i missing something ?
@Sloth bear
<ToAskModal>
<button
className="inline-flex items-center bg-blue-700 text-slate-100 border-0 py-1 px-3 focus:outline-none rounded text-base"
>
<AiOutlinePlus className="mr-2" />
To Ask
</button>
</ToAskModal>
ToAskModal is a shadCN dialog,
i am trying to pass a button as children to ToAskModal which is a client component, its working but throwing some hydration errors, so am i doing it wrong or missing something ?
i simply dont wanna create a 'use client' component for only this btn, is there any work around or i am approaching this wrongly.
Gull Dong
@Sloth bear so button tag was the problem, i changed it to div and it worked, why does it not work with button ? am i missing something ?
most likely you nested <button> inside another <button> which is invalid html
Answer
Sloth bearOP
Ya that's definitely whats happening.