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

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>

5 Replies

kapa.ai•6mo ago

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: ----------------------

kapa.ai•6mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•6mo ago

@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)

kapa.ai•6mo ago

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: ----------------------

kapa.ai•6mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below