LoginSignup
1
0

More than 1 year has passed since last update.

【React】Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. のエラー対処法

Posted at

エラーが発生

コンパイル後、コンソール画面にエラーが発生した

index.js:1437 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at div
    at Dashboard (http://localhost:3000/static/js/main.chunk.js:175:77)
    at AuthProvider (http://localhost:3000/static/js/main.chunk.js:441:23)
    at App

【 訳 】
警告:関数はReactの子としては無効です。 
これは、レンダリングから<Component/>ではなくComponentを返す場合に発生する可能性があります。 
または、この関数を返すのではなく呼び出すつもりだったのかもしれません。

エラーの発生原因

関数呼び出し時に、()を書くのを忘れていた

Dashboard.js
import React, {useState, useContext} from "react";
import dig from "object-dig";
import { signInWithGoogle, logOut } from "../service/firebase";
import { AuthContext } from "../providers/AuthProvider";

const Dashboard = () => {
    const currentUser = useContext(AuthContext);

    const formRender = () => {
        let dom;
        if ( dig(currentUser, 'currentUser', 'uid')) {
            dom =
                <form>
                    <input placeHolder="ToDoName" />
                <button>追加</button>
            </form>;
        } else {
            dom = <button onClick={signInWithGoogle}>ログイン</button>
        }
        return dom;
    };

    return(
        <div>
            // 原因: 以下関数呼び出し時に、()を書くのを忘れていた
            {formRender}
        </div>
    )
};

export default Dashboard;

エラーの解決方法

以下のように修正すればOK

Dashboard.js
// 略
{formRender()}
// 略
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0