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

Answer 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.