CODEWITHSUNDEEP
javascriptreactjs
alistp
alistp

Reputation: 15

React.js Can't read property of undefined V18

i'm making a simple app and here i make a button and pass some props to it

<HeaderContainer buttonToLink={'/signin'} buttonToText ={'Sign in'}>
//some code goes here
</HeaderContainer>

then in another file i handle it

export  function HeaderContainer({children , ...restpros}) {
console.log(restpros.buttonToLink,restpros.buttonToText)
return (
    <Header>
        <Header.Frame>
            <Header.Logo to={'/'} src = {Logo} alt = {'NetFlix'} />
            <Header.ButtonLink to ={restpros.buttonToLink} > <p>{restpros.buttonToText}</p></Header.ButtonLink>
        </Header.Frame>
        {children}
    </Header>
)}

i got the error

Can't read property of undefined

and i don't know why i get undefined because i pass my props to it

note : Header.ButtonLink is a react router link and i use styled component for styling

Upvotes: 0

Views: 38

Answers (1)

Cosby
Cosby

Reputation: 106

I think it might be due to the format of your parameters in the HeaderContainer component. If you take a look at the ReactJS docs in the "Composition vs Inheritance" section here: https://reactjs.org/docs/composition-vs-inheritance.html it mentions how you can access children through the props object like so:

    export  function HeaderContainer(props) {
    console.log(props.buttonToLink, props.buttonToText);
    return (
        <Header>
            <Header.Frame>
                <Header.Logo to={'/'} src={Logo} alt={'NetFlix'} />
                <Header.ButtonLink to={props.buttonToLink} > 
                    <p>{props.buttonToText}</p>
                </Header.ButtonLink>
            </Header.Frame>
            {props.children}
        </Header>
    )}

Now you should be able to use your component like before:

<HeaderContainer buttonToLink={'/signin'} buttonToText ={'Sign in'}>
    <View>
        <Text>I'm a child component</Text>
    </View>
</HeaderContainer>

Please let me know if this works for you, if not, I will build a working example on my machine and share it with you.

Good luck :)

Upvotes: 1

Related Questions