TypeError: Cannot read property 'withFooter' of null

user_10481295 0
Viewed 191

I'm trying to create a layout element in react typescript. Im trying to have a boolean prop that will determine whether to render the footer or not. Unfortunately, i'm getting a cannot read property of undefined issue. I also want to have a default true value for the prop type. Im new to react and still trying to learn the ins and outs.

import React, { Component } from 'react'
import Scrollbar from 'react-smooth-scrollbar'
import Header from '../Header/index'
import Footer from '../Footer/index'

type Props = {
    withFooter: boolean
}

class Layout extends Component<{}, Props> {
    render() {
        let footer
        if (this.state.withFooter) {
            footer = <Footer />
        } else {
            footer = null
        }

        return (
            <div>
                <Scrollbar>
                    <Header />
                    {this.props.children}
                    {footer}
                </Scrollbar>
            </div>
        );
    }
}

export default Layout
react-props typescript reactjs
1 Answers

Can you try this

type Props = {
    withFooter: boolean
}

class Layout extends Component<Props, {}> {
    public static defaultProps = {
         withFooter: true,
    };
    render() {
        let footer
        if (this.props.withFooter) {
            footer = <Footer />
        } else {
            footer = null
        }

        return (
            <div>
                <Scrollbar>
                    <Header />
                    {this.props.children}
                    {footer}
                </Scrollbar>
            </div>
        );
    }
}
user_116030040
Related