Why is my code giving me "Functions are not valid as a react child"?

Question

I am building a react project to be able to track different places people have been, and I am getting the following error:

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

Parks.js

import React, { useState } from 'react'


const Parks = () => {

    function studCheck() {
        return document.querySelectorAll('input[type="checkbox"]:checked').length;
    }

    return (
        <div>


            {/* <div class="container"> */}
            <div>
                <h1>National Parks Checklist</h1>
                <nav>
                    <ul>
                        <li><a href="parks.html">The National Parks</a></li>
                        <li><a href="monuments.html">The National Monuments</a></li>
                        <li><a href="all.html">All NPS Sites</a></li>
                        <li><a href="states.html">States</a></li>
                        <li><a href="countries.html">Countries</a></li>
                    </ul>
                </nav>
            </div>

            <br></br>
            
            <div>
                <h2>Parks Visited: { studCheck }</h2>
            </div>

            <br></br>

            <table /*style="border:2px solid black;margin-left:auto;margin-right:auto;"*/>
                <tbody>

                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Acadia</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> American Samoa</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Arches</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Badlands</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Big Bend</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Biscayne</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Black Canyon of the Gunnison</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Bryce Canyon</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Canyonlands</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Capitol Reef</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Carlsbad Caverns</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Channel Islands</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Congaree</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Crater Lake</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Cuyahoga Valley</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Death Valley</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Denali</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Dry Tortugas</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Everglades</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Gates of the Arctic</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Gateway arch</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Glacier</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Glacier Bay</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Grand Canyon</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Grand Teton</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Great Basin</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Great Sand Dunes</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Great Smoky Mountains</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Guadalupe Mountains</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Haleakala</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Hawaii Volcanoes</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Hot Springs</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Indiana Dunes</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Isle Royale</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Joshua Tree</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Katmai</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Kenai Fjords</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Kings Canyon</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Kobuk Valley</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Lake Clark</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Lassen Volcanic</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Mammoth Cave</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Mesa Verde</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Mount Rainier</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> New River Gorge</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> North Cascades</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Olympic</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Petrified Forest</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Pinnacles</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Redwood</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Rocky Mountain</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Saguaro</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Sequoia</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Shenandoah</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Theodore Roosevelt</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Virgin Islands</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Voyageurs</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> White Sands</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Wind Cave</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Wrangell - St. Elias</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Yellowstone</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Yosemite</label></td></tr>
                    <tr><td><label><input type="checkbox" onChange={studCheck} /> Zion</label></td></tr>

                </tbody>
            </table>
        </div>
    )
}

export default Parks

I want the function studCheck to return the number of boxes that are checked. I have attempted to move around divs and other tags to get rid of this error as well as changing the function, but no luck yet. I'm sure there is a simple fix

Why is your function async? Nothing async should be part of the render. (also, you failed to call said function) — Kevin B, Dec 13 '22 at 21:31
You should call the function instead of putting it directly in the output, try something like this: `
Parks Visited: {studCheck()}
` (note the parenthesis at the end). — Alejandro, Dec 13 '22 at 21:33
Does this answer your question? [React warning: Functions are not valid as a React child](https://stackoverflow.com/questions/51220135/react-warning-functions-are-not-valid-as-a-react-child) — Kevin B, Dec 13 '22 at 21:34

score 1 · Answer 1 · edited Dec 19 '22 at 08:40

1

You should call the function instead of putting it directly in the output, try something like this:

<h2>Parks Visited: {studCheck()}</h2>

edited Dec 19 '22 at 08:40

mousetail

7,009
4
25
45

answered Dec 14 '22 at 01:27

Ethan

39
5

Y U K I M U R A · Answer 2 · 2023-01-09T12:26:38.680

1

not regarding the question: using queryselector in react.js is anti-pattern(wrong), you should use useRef hook, you can find docs about it here: https://reactjs.org/docs/hooks-reference.html

edited Jan 09 '23 at 12:26

answered Dec 19 '22 at 09:07

Y U K I M U R A

488
19

score 0 · Answer 3 · answered Dec 19 '22 at 08:55

After changing:

<h2>Parks Visited: { studCheck }</h2>

To:

<h2>Parks Visited: { studCheck() }</h2>

You should also update the onChange event handlers for the checkboxes to call the function instead of returning it:

<tr><td><label><input type="checkbox" onChange={() => studCheck()} /> Acadia</label></td></tr>

Why is my code giving me "Functions are not valid as a react child"?

Parks Visited: {studCheck()}

3 Answers3