How to pass modified data from child component to parent component in Next.js?
Unanswered
Standard Chinchilla posted this in #help-forum
Standard ChinchillaOP
I'm currently learning Next.js and working on a small project. I have a Canvas component and a child component called Preview. In the Preview component, I'm manipulating data received from the parent (Canvas) and obtaining a new result. My question is, how can I pass this modified data back from the Preview component to the Canvas component?
Code Examples:
Canvas component:
Preview component:
I've created a Canvas component with a child Preview component. In the Preview component, I manipulate the data received from the Canvas component. Now, I want to send this modified data back to the Canvas component.
Code Examples:
Canvas component:
// Canvas.js
'use client'
import Preview from '@/components/Preview'
const Canvas = (props) => {
const demoData = {
width: 50,
height: 50
}
return(
<div>
<div><Preview data={demoData} /></div>
{props.children}
</div>
)
}
export default CanvasPreview component:
// Preview.js
const Preview = (props) => {
/*
Manipulate data received from Canvas to obtain a new result
...
...
*/
return (
<div>
{props.width}
{props.height}
</div>
)
}
export default PreviewI've created a Canvas component with a child Preview component. In the Preview component, I manipulate the data received from the Canvas component. Now, I want to send this modified data back to the Canvas component.