How do i pass a value from child component to parent component using function?

Question

How do i pass a validation value from child component to parents component? i tried to use props but it didn't work . i tried to pass the 'isValidValue' status

Child Component :

    function MilikSendiri({isValidValue}) {
  const { register, handleSubmit } = useForm()

    function sweetAlertclick(){
      Swal.fire({
          icon: 'success',
          title: 'Data anda sudah tersimpan ',
        })
  }    
    return (
  <Formik 
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}
          // validateOnMount
          > 
          {
            formik => {
              const isValidValue = formik.isValid? ("Data Completed") : ("DData incomplete");
            return(
        <div>
            <div>
              Status : {isValidValue}
            <label htmlFor="luasTanah"> Luas Tanah </label>
            <Field className="formBiodata"
            type="text" id="outlined-basic" 
            placeholder="luasTanah"
            fullWidth
            id="luasTanah"
            name="luasTanah"
            margin="normal" variant="outlined"
            />
            <ErrorMessage name='luasTanah' component={TextError}/>
            </div>

                    <div>
              <label htmlFor="BiayaPBB"> Biaya PBB </label>
              <Field className="formBiodata"
              type="text" id="outlined-basic" 
              placeholder="BiayaPBB"
              fullWidth
              id="BiayaPBB"
              name="BiayaPBB"
              margin="normal" variant="outlined"
              />
              <ErrorMessage name='BiayaPBB' component={TextError}/>
              </div>




    <Button  onClick={sweetAlertclick} type ="submit" 
variant="contained" startIcon={<SaveIcon />} color="primary" style={{ 

marginLeft: '25rem', marginTop: '20px', width: '20rem', height: 45, fontSize: 22, backgroundColor: '#22689F'}} disabled={!formik.isDirty && !formik.isValid} >Simpan

        </div>
      )
      }
    }

    </Formik>

) }

Parent Component :

function UKTRumah ({isValidValue}) {
return (
    <Formik 
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={onSubmit}
    // validateOnMount
    > 
    {
        formik => {
            console.log('Formik props', formik)
            return( 
               
    <div className ="IsiBiodata"> 
  <Accordion square expanded={expanded === 'panel1'} onChange=. 
{handleChange('panel1')} style={{marginLeft: '15rem', marginRight: 
'15rem', marginTop: '3rem'}}>
    <AccordionSummary aria-controls="panel1d-content" id="panel1d- 
header">
    <PersonIcon/>
     <Typography>  Data Rumah</Typography>
     <Typography}> { isValidValue }
    </Typography>
    </AccordionSummary>
    <AccordionDetails>
    <div className ="IsiBiodata"> 
 <Form>
 </div>
    </Form>
    </div>
    </AccordionDetails>
  </Accordion>
            </div>
        
        )}}
           </Formik>

)}

Thank you

Answer 1

Your example code seems to be lacking some key lines to answer the question specifically.

However, generally if it is data that Parent should be aware of, but that the child will make use of, it should be a value of state in the parent, then handed to the child as props. Here's a very small example using functional components:

const Child = ({ formik, setIsValid, isValid }) => {
  useEffect(() => {
    setIsValid(formik.isValid)
  }, [formik.isValid]);

  return <input />;
}

const Parent = () => {
  const [isValid, setIsValid] = useState(true);

  return <Child isValid={isValid} setIsValid={setIsValid} />
}

Answer 2

You can hold the value on your parent and pass a function to change it to your child. I can't really show you that with the code you posted, but I can show an example of what I mean. The parent has a state with an update function setIsValid and passes that to the child. The child can call setIsValid and that will update the isValid value on the parent.

parent

function Parent() {
    const [isValid, setIsValid] = useState(false);

    return <div>
        <Child setIsValid={setIsValid} />
        IsValid {isValid}
    </div>
}

child

function Child({ setIsValid }) {
    return <button onClick={() => setIsValid(true)}>Set Valid</button>
}