How to get attributes / object of React child component in parent component

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: <></>
            }
           ]}
          /> 

    </>  
   )
}

score 1 · Answer 1 · answered Aug 31 '22 at 14:38

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

thanks Himmels, as I am not navigating pages [router would not work then], your second option seems more interesting i will give it a try but for current project i dont have liberty to add Redux in it. for someone looking for options i used useRef hook to pass data between parent and child. this link helped me to showcase the scenario https://stackoverflow.com/questions/60554808/react-useref-with-typescript-and-functional-component — kah, Sep 01 '22 at 13:59
@kashifayyaz Ok well done, if the data passed from child to parent is for the lifetime of the component only then yes, you got a good approach. — Himmels DJ, Sep 08 '22 at 14:22

How to get attributes / object of React child component in parent component

1 Answers1