R
Refine

ask-any-question

How can I pass the changed values in child props to the parent state?

Sstormy-gold2/14/2024
children props
export const EditFirstEventProps = ({ items, id }: IEditFirstEventProps) => {
const [itemsState, setItemsState] = useState<FirstEventValues>(items)

const {
handleSubmit,
refineCore: { onFinish },
} = useForm<HttpError>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups/detail',
action: 'edit',
},
})

useEffect(() => {
setItemsState(items)
}, [items])

const onSubmit = async () => {
onFinish(itemsState)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1 }}>
<TextField
required={true}
label={'1회차 이상'}
variant="outlined"
size="small"
disabled={itemsState.first_event_status === 'T'}
value={itemsState.first_event || 0}
onChange={(e) => {
setItemsState({
...itemsState,
first_event: parseInt(e.target.value),
})
}}
/>
...
export const EditFirstEventProps = ({ items, id }: IEditFirstEventProps) => {
const [itemsState, setItemsState] = useState<FirstEventValues>(items)

const {
handleSubmit,
refineCore: { onFinish },
} = useForm<HttpError>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups/detail',
action: 'edit',
},
})

useEffect(() => {
setItemsState(items)
}, [items])

const onSubmit = async () => {
onFinish(itemsState)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1 }}>
<TextField
required={true}
label={'1회차 이상'}
variant="outlined"
size="small"
disabled={itemsState.first_event_status === 'T'}
value={itemsState.first_event || 0}
onChange={(e) => {
setItemsState({
...itemsState,
first_event: parseInt(e.target.value),
})
}}
/>
...
parent
const [firstEvent, setFirstEvent] = useState<FirstEventValues>({ first_event: 0, first_event_status: 'F' })

...
<Grid item xs={24} sm={24} md={24} lg={24} xl={10}>
<Card sx={{ paddingX: { xs: 4, md: 2 }, display: 'flex', flexDirection: 'row' }}>
<Box sx={{ width: 250 }}>
<CardHeader title={'첫구독 혜택'} />
</Box>
<Box sx={{ marginTop: 2 }}>
<CardContent sx={{ md: 3, pt: 0 }}>
<EditFirstEventProps items={firstEvent} id={groupNo} />
</CardContent>
</Box>
const [firstEvent, setFirstEvent] = useState<FirstEventValues>({ first_event: 0, first_event_status: 'F' })

...
<Grid item xs={24} sm={24} md={24} lg={24} xl={10}>
<Card sx={{ paddingX: { xs: 4, md: 2 }, display: 'flex', flexDirection: 'row' }}>
<Box sx={{ width: 250 }}>
<CardHeader title={'첫구독 혜택'} />
</Box>
<Box sx={{ marginTop: 2 }}>
<CardContent sx={{ md: 3, pt: 0 }}>
<EditFirstEventProps items={firstEvent} id={groupNo} />
</CardContent>
</Box>
Kkapa.ai2/14/2024
Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass the changed values in child props to the parent state, you can use a callback function. In your case, you can pass a function from the parent component to the child component that updates the parent's state. Here's how you can do it: In your parent component, pass a function that updates the state to the child component:
<EditFirstEventProps items={firstEvent} id={groupNo} setFirstEvent={setFirstEvent} />
<EditFirstEventProps items={firstEvent} id={groupNo} setFirstEvent={setFirstEvent} />
Then, in your child component, call this function whenever you want to update the parent's state:
const { setFirstEvent } = props;

// ...

onChange={(e) => {
const updatedItemsState = {
...itemsState,
first_event: parseInt(e.target.value),
};
setItemsState(updatedItemsState);
setFirstEvent(updatedItemsState); // update parent's state
}}
const { setFirstEvent } = props;

// ...

onChange={(e) => {
const updatedItemsState = {
...itemsState,
first_event: parseInt(e.target.value),
};
setItemsState(updatedItemsState);
setFirstEvent(updatedItemsState); // update parent's state
}}
This way, whenever the state in the child component changes, it will also update the state in the parent component. Please note that this is a general React pattern and is not specific to Refine. For more information on how to handle state and props in React, you can refer to the official React documentation (https://reactjs.org/docs/components-and-props.html). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai2/14/2024
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below
Sstormy-gold2/14/2024
@kapa.ai ok, and I want parent props use handelSubmit
export default function CustomerGroupsList({ customergroups, detailData }): {
customergroups: ICustomerGroups
detailData: FirstEventValues
} {
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, CombineValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups/detail',
action: 'edit',
},
})
export default function CustomerGroupsList({ customergroups, detailData }): {
customergroups: ICustomerGroups
detailData: FirstEventValues
} {
const {
register,
handleSubmit,
refineCore: { onFinish },
} = useForm<TermValues, HttpError, CombineValues>({
shouldUseNativeValidation: true,
refineCoreProps: {
resource: 'customergroups/detail',
action: 'edit',
},
})
But, 'UseFormReturn<TermValues, HttpError, CombineValues>' 형식에 'refineCore' 속성이 없습니다.ts(2339) 'Partial<{ mode: "onBlur" | "onChange" | "onSubmit" | "onTouched" | "all"; disabled: boolean; reValidateMode: "onBlur" | "onChange" | "onSubmit"; defaultValues: AsyncDefaultValues<TermValues> | { ...; }; ... 10 more ...; delayError: number; }>' 형식에 'refineCoreProps'이(가) 없습니다.ts(2353)
Kkapa.ai2/14/2024
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing suggests that the refineCore property does not exist on the UseFormReturn type, and the refineCoreProps property does not exist on the Partial type. The useForm hook from Refine provides a refineCore object that contains the onFinish function, which is used to handle form submission. However, it seems like TypeScript is unable to find this property in your code. Similarly, the refineCoreProps is used to specify the resource and action for the form, but TypeScript is unable to find this property as well. This could be due to a few reasons: 1. There might be a version mismatch between your installed Refine package and the version of Refine you're referring to in the documentation. Make sure you're using the latest version of Refine. 2. You might be importing useForm from the wrong package. Make sure you're importing it from @refinedev/react-hook-form or @refinedev/antd, depending on the UI library you're using. 3. There might be a mistake in your TypeScript types. Make sure the types you're using for useForm are correct. Here's how you can import and use useForm with Refine and Ant Design:
import { useForm } from "@refinedev/antd";

const { formProps, saveButtonProps } = useForm<IProduct, HttpError, FormValues>({
resource: "products",
action: "edit",
id: 123,
});
import { useForm } from "@refinedev/antd";

const { formProps, saveButtonProps } = useForm<IProduct, HttpError, FormValues>({
resource: "products",
action: "edit",
id: 123,
});
For more information, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai2/14/2024
<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Customizable listHi, How can i hide/unhide columns in list, and also enable/disable columns in list (refine with viFilters errorHi, how can I use filters from useTable together with special characters (like # for example). When I would create a message in #ask-any-I would create a message in #ask-any-question but I don't know if this would fit there... It takes Refine CRM TutorialDo you have an estimated timeline for the new tutorial in the documentation mentioned here: https://anyways i can make logout quicker ?everything working fine but after 401 it takes too much to logout user ``` logout: async () => {Patch will be processed after Put transmission.export const EditProps = ({ items, id, point }: IEditPageProps) => { const [itemsState, setItemsStRefine Sider ModificationI'm working on a Refine project using Material UI and facing a particular challenge. I need to add ahelp with npm version 3.6.3Hello everyone, could someone help me instal refine version 3.6.4 because im trying to follow a cerRun refine on hosting providerHow to deploy refine in cPanelConnect Rest api (Express) with simple-rest list based on the company id to get all job-offersHi im relatively new to refine. I made a Rest api endpoint using express to get alle the job-offers useShow in nextjs is not extracting the id from the pathmy path is /blog/[id/page.tsx and it looks liek this: 'use client'; import { useShow } from '@reffilter works in some resources and doesnt work in some other.also case insensitivity doesn't work. changing filterOperator to containss didnt help. when filterOpnode_modulesafter installing the graphql codegen iam facing this error on both of tsconfig.json file on the coreNext.js App routeris there a way to start a next.js proyect with app routes instead pages routes using npm create refNotification providerHow to customize success notification on create, edit, update and deletehi! im new here, is there a way tohi! im new here, is there a way to initialize a next.js project with app route using create-refine -