エラーが発生
コンパイル後、コンソール画面にエラーが発生した
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()}
// 略