Accessing properties of a react component from the parent

Question

I want to bundle some data together with a component. Here is an example of a SFC that has a property called name. I do not want to use the property name with the component named MyFormTab. Instead I would like to access this property from the parent component and assign it to be displayed within the parent.

    const MyFormTab = (props) => {
        const name = props.name        


        return (
            <>
                <div className='flex-center-col'>
                    <input type='email'></input>
                    <input type='text'></input>
                </div>
            </>
        )
    
    }

I would then like to render this component inside a parent and use the name property for another purpose

    const ParentOfMyFormTab = () => {
        const [currentTab, setCurrentTab] = useState(1)
        const Tab1 = <MyFormTab name='Tab1' />
        const Tab2 = <MyFormTab name='Tab2' />
        return (
            <form>
                <div id="tabTitles">
                    <h2 onClick={setCurrentTab(1)}>Tab1.name</h2>
                    <h2 onClick={setCurrentTab(2)}>Tab2.name</h2>
                </div>
                {currentTab === 1 ? <Tab1 /> : <Tab2 />}
            </form>
        )
    }

Instead of an SFC, I could also use a class I'm thinking.

    class MyFormTab {
    
       constructor(name){
           this.name = name
       }
    
       render(){ 
           return (
                <>
                    <div className='flex-center-col'>
                        <input type='email'></input>
                        <input type='email'></input>
                    </div>
                </>
           )
    
       }
    }

My project is predominantly using hooks however. My team lead(who doesn't know React much) will probably be hesitant towards mixing class components with hooks. I've read on other posts that hooks can basically replace class components in most situations. I don't know how hooks could be better, or even be used in this situation.

What do you think would be a good way to do what I am trying to do? Is putting SFC's with hooks and class components into the same project a good idea? Am I looking at this whole thing wrong?

Thank you

This sounds like it might be an [XY problem](http://xyproblem.info/). Could you expand on what you're trying to do with the `name`? — cbr, Oct 07 '20 at 17:21
`name` is not a prop to your function. It's just a local variable. — jmargolisvt, Oct 07 '20 at 17:23
@jmargolisvt So are you saying that this is not possible? With both SFC's and classes? — Sam, Oct 07 '20 at 17:25
Sure you can, you can just set it as a property of `MyFormTab` after its definition: `MyFormTab.name = 'foobar'`. — cbr, Oct 07 '20 at 17:28
to be able to comunicate between components you have many choices, I would recommend usage of context in react https://es.reactjs.org/docs/context.html — Eddwin Paz, Oct 07 '20 at 17:29
@EddwinPaz I have redux set up, but for this specific scenario, I feel like containing a bunch of the information within the child is more clear, because all that information pertains to the child component, otherwise I need to create other variables which are not bound together but represent the same thing. — Sam, Oct 07 '20 at 17:35
You can use also useState inside your component and share this state across the components as a prop. — Eddwin Paz, Oct 07 '20 at 17:36
@EddwinPaz I'm specifically wondering about passing data from a child to it's parent, and I don't think useState could do that — Sam, Oct 07 '20 at 17:39
why you ask Accessing properties of a react component from the parent, and then answer me that you need to pass data :/ if you want to access data from child components you need to either use context, or pass it using prop drilling. — Eddwin Paz, Oct 07 '20 at 17:46
@cbr I think your solution may be close to what I'm looking for, I would like to modularize it though and hide it away from the code in the parent. What I'm trying to do is contain all the code about the child together so that parent isn't as cluttered. — Sam, Oct 07 '20 at 17:47
https://stackoverflow.com/questions/14857901/javascript-access-parent-properties — Eddwin Paz, Oct 07 '20 at 17:49
@EddwinPaz Thanks, I don't think that's quite what I'm looking for, I updated my example of the parent to try to make more sense. I can be poor at explaining things sometimes, sorry. — Sam, Oct 07 '20 at 17:59

knada · Accepted Answer · 2020-10-07T18:17:56.813

1

In react props are passed only from parent to child. So you can just have a parent with that name value and passed it down if you want to. Edited my answer to respond to you edit.

const MyFormTab = (props) => {
    const name = props.name        

    return (
        <>
            <div className='flex-center-col'>
                <input type='email'></input>
                <input type='text'></input>
            </div>
        </>
    )
}

const ParentOfMyFormTab = () => {
    const [currentTab, setCurrentTab] = useState(1)
    const Tab1 = <MyFormTab name=`Tab1` />
    const Tab2 = <MyFormTab name=`Tab2` />
    return (
        <form>
            <div id="tabTitles">
                <h2 onClick={setCurrentTab(1)}>Tab1</h2>
                <h2 onClick={setCurrentTab(2)}>Tab2</h2>
            </div>
            {currentTab === 1 ? <Tab1 /> : <Tab2 />}
        </form>
    )
}

To you question about mixing class based and function components. You can't use hooks with class based components so don't, and there is no need to. I think you should learn more about the basics of react. If you need to share data with other components, the data should be in the parent component, passed to children or in a React context.

edited Oct 07 '20 at 18:17

answered Oct 07 '20 at 17:29

knada

336
1
5

I wouldn't be using hooks inside class components. Some components would use hooks, and some would be class components – Sam Oct 07 '20 at 17:32
Why do you think you need class components? Functional components can do almost everything you need. You may need to have some reusable functionality later on in the project and that can be a custom hook with you can't use with class components. If you are already using hooks you have to go all in with functional components, to prevent future pains. – knada Oct 07 '20 at 17:33
Classes can have properties, and I'm wondering about passing data from a child to it's parent, I think that would be the only reason. I'm not saying I need to use them, but I'm wondering if this is a way of doing this which makes sense. – Sam Oct 07 '20 at 17:37
Functions can have variables in them, like in the example above `const name = 'Tab1'`. – knada Oct 07 '20 at 17:40
I updated my code examples to try to better explain what I am trying to do – Sam Oct 07 '20 at 18:02

Accessing properties of a react component from the parent

1 Answers1

Linked