0
votes

I am getting an interesting warning message in my console. My warning message is: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

What does this mean?

Here is my return code in my application:

render() {
    return (

        <Container>
            <Row className="mt-2">
                <Col md={4} className="pt-0">
                    <h2>Upload Timeframes</h2>
                </Col>
                <Col className="text-right" md={8}>

                    <Button onClick={() => this.setModalShow('create_window')}>
                        Add New Timeframe
                            </Button>
                </Col>
            </Row>

            {this.activeTimeframeSection}

            {this.futureTimeframeSection}

            {this.archivedTimeframeSection}
        </Container>
    )
}
2
If activeTimeframeSection is a function, you aren’t actually calling the function, missing () . - Alexander Staroselsky
Thats right! Thank you! - Kaitlyn Ayres

2 Answers

1
votes

The issue looks like you aren't actually calling the functions activeTimeframeSection, futureTimeframeSection, and archivedTimeframeSection (missing ()):

render() {
    return (

        <Container>
            <Row className="mt-2">
                <Col md={4} className="pt-0">
                    <h2>Upload Timeframes</h2>
                </Col>
                <Col className="text-right" md={8}>

                    <Button onClick={() => this.setModalShow('create_window')}>
                        Add New Timeframe
                            </Button>
                </Col>
            </Row>

            {this.activeTimeframeSection()}

            {this.futureTimeframeSection()}

            {this.archivedTimeframeSection()}
        </Container>
    )
}
0
votes

Probably has something to be with this section:

{this.activeTimeframeSection}

{this.futureTimeframeSection}

{this.archivedTimeframeSection}

Is possible that this propeties are referencing to functions instead raw JSX. If they are methods, ensure to call them and return only the required JSX.