如何在父组件中获取React子组件的属性/object

Question

I have created FC [say child component for my example] containing address fields [couple of input boxes and SelectItems], when this FC is called from another component [parent], i need to access the values of input boxes and select items added by user.

Can you help me by giving simple example of say 1 text box in child component when called by parent via Functional Component style [TypeScript]

Here is my example code of child component having two Inputs and a SelectItem

return (
    <>
          <Accordion varient={'grouped'} expanded theme={theme}
          items={[
            {
              content: 
              <>

              <Input label='Address Line 1' fullWidth={true} type={''} startAdornment={""} endAdornment={""}  
                  onChange={(e) => setAddressL1(e)} onBlur={handleChangeAddrL1} id={''} theme={theme} dynamic={false} />
             
                <Input label='City' fullWidth={false} type={''} startAdornment={""} endAdornment={""}                onChange={(e) => setCity(e)} onBlur={handleChangeCity} id={''} theme={theme} dynamic={false} /> 
             
            
              <Select label='State' theme={theme} items={states} value = {stateCode} sxProps={{ m: 2, width: 100 }} ref={inputRef}
                    onChange={handleChange1} ></Select> 
                
             
              <Button text= 'Verify Address' ></Button>

              </>,
              isExpanded: true,
              key: "string",
              subtitle: `${addressL1} ${addressL2} ${city} ${stateCode} ${county} ${zipCode}`, 
              title: AccordionTitle,
              actionBtn: <></>
            }
           ]}
          /> 

    </>  
   )
}

Answer 1

Depending on what you want to achieve, there are two scenario to deal with your request. First You can pass data from child component to parent component using navigation.navigate('RouterName', {/* your params here */}) from the child component triggered by onClick or onPress event. Let say the function is moveTo, then you will have this in the child component:

const moveTo = () => {
//Logics here
...
navigate('/yourUrl/', { state: { id: 7, color: 'green' } });
}

Then in the parent component, you grab the data of color like this:

import { useParams } from 'react-router-dom'

const getdataFromChild = ({route,navigate}) => {
  return (
    <div>
        {route.params.state}
    </div>
  )
}

export default getDataFromChild

This is only possible when you are triggering the navigation from child to parent, otherwise move to option Second.

Option Second: If there is no click event to trigger a navigation from child to parent or parent to child, then you need to use React redux. So you have to create a store of that data and share it throughout your app so it may be accessed in every component that needs it. The documentation for redux is also on medium or go straight to the official documentation of react redux to get the informations from the source