Unable to nest client component in server component
Unanswered
Boat-tailed Grackle posted this in #help-forum
Boat-tailed GrackleOP
Hello there, i am trying to put a component which uses client (contains a form that submits a file to an api) inside a server page, but it doesn't seem to let me. Why is that so? Isn't nesting client components inside server components allowed?
Error I'm getting:
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
<form onSubmit={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
Server Page
Client component
Error I'm getting:
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
<form onSubmit={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
Server Page
import UploadImage from '@/components/uploadImage'
const Admin = () => {
return (
<div>
Admin
<UploadImage />
</div>
)
}
export default AdminClient component
'use client'
const UploadImage = () => {
async function uploadTos3(e) {
const formData = new FormData(e.target)
const file = formData.get('file')
if (!file) {
return null
}
const fileType = encodeURIComponent(file.type)
const {data} = await axios.get(/api/media?fileType=${fileType})
const {uploadUrl, key} = data
await axios.put(uploadUrl,file)
return key
}
async function handleSubmit(e) {
e.preventDefault()
const key = await uploadToS3(e)
}
return (
<div>
<p>Upload Image</p>
<form onSubmit={handleSubmit}>
<input type='file' accept='image/jpeg image/png' name='file'/>
<button type='submit'>Upload</button>
</form>
</div>
)
}
export default UploadImage3 Replies
European sprat
RSC needs to be async function
Boat-tailed GrackleOP
Do you mean i should mark my Admin compoentn above as async?
Boat-tailed GrackleOP
Also i just realised - should i be naming my Admin function ‘Page’ instead? Since im using it as a page.jsx file?