（Gatsby.js) Functions are not valid as a React childエラーが出てしまう。

Question

前提・実現したいこと

初質問で至らないところがあればすみません。自分は趣味でwebページなどを作っています。

gatsby.jsにてwebページを作っていますが、変数で横幅や縦幅を決めることができる表テーブルをコンポーネントできないか試していたところ、以下のようなエラーメッセージが出てしまいました。解決方法はわかりますでしょうか。アロー関数の部分が怪しいとは思うのですが。

自分は初心者なため、for文の中の記述も非常に怪しいです。LastTableにfilterメソッドでできた配列を格納しようとしているところも上手くif文の条件式がかけているか自信がありません。

発生している問題・エラーメッセージ

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.

該当のソースコード

//(Table.js)
import * as React from "react"
import PropTypes from "prop-types"


const Table = ({ WidthTable,textarray,ElementinTable,JoinTable,LastTable }) => (
    ElementinTable = textarray.map((textarray) => 
    <td>
        {textarray}
    </td>),
    (()=>{
        for(let i = 0;i<(textarray.length-1);i++){
        if(i%(WidthTable-1) === 0 && i!==0 || i===0){
            LastTable = ElementinTable.filter(ElementinTable => ElementinTable.length-1 <= i && ElementinTable.length%WidthTable < WidthTable )
            JoinTable =
            <tr>
                {LastTable}
            </tr>
        }
        if(i===(textarray-1)){
            return(<table><tbody>
                {JoinTable}
            </tbody></table>);
        }
    }
    })
)
    


Table.propTypes = {
    WidthTable: PropTypes.number,
    textarray: PropTypes.arrayOf(PropTypes.string),
    ElementinTable: PropTypes.arrayOf(PropTypes.string),
    JoinTable: PropTypes.arrayOf(PropTypes.string),
    CompletedTable: PropTypes.arrayOf(PropTypes.string),
}
  
Table.defaultProps = {
    text: `デフォルト`,
}

export default Table

//(index.js内で渡している変数の値)
<Table WidthTable={2} textarray={["aaa","aaa"]} />

試したこと

JSXの中で、for文をかこうとして、アロー関数を使ったのが原因だと思うのですが、地の文で書いてもエラーが出てしまうため、弱っています。

補足情報（FW/ツールのバージョンなど）

gatsby.js

ここにより詳細な情報を記載してください。

Answer 1

Reactの書き方から逸脱していて何がしたいのかわかりませんが、今の状態でとりあえずエラーをなくしたいならこんな感じです。シンプルなコンポーネントから見直してみてください。

const Table = ({
  WidthTable,
  textarray,
  ElementinTable,
  JoinTable,
  LastTable
}) =>
  (() => {
    ElementinTable = textarray.map((textarray) => <td>{textarray}</td>);
    for (let i = 0; i < textarray.length - 1; i++) {
      if ((i % (WidthTable - 1) === 0 && i !== 0) || i === 0) {
        LastTable = ElementinTable.filter(
          (ElementinTable) =>
            ElementinTable.length - 1 <= i &&
            ElementinTable.length % WidthTable < WidthTable
        );
        JoinTable = <tr>{LastTable}</tr>;
      }
      if (i === textarray - 1) {
        return (
          <table>
            <tbody>{JoinTable}</tbody>
          </table>
        );
      } else {
        return <>"HOGE"</>;
      }
    }
  })();

Comments

[kisukegotyou]

ご回答ありがとうございます。エラー解決致しました。
非常に汚いコードで申し訳ないです。
Reactやコンポーネントのシンプルな書き方を1から見直して書き直していきたいと思います。

[k_a]

嫌味な書き方になってしまいましたが、汚いコードというよりReactの書き方ではない、という印象です。

`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.`
上記エラーはコンポーネントの返り値がReact Elementとして成立していないという意味です。
元のコードだと返り値が式になっています。回答はそれを即時関数化して一応React Elementを返すようにしたというだけの処置です。

データの加工部分（代入やfilter等）はuseEffects等のHookを利用し、リターン部はReact Elementの構築に専念するのが良いと思います。

今回程度の計算だとコストはかからないと思いますが、この書き方だと上位コンポーネントの再レンダリング毎に計算が走ってしまいます。

また計算部分とリターン部分が曖昧になり今回のようなエラーを起こす原因にもなります。

[kisukegotyou]

ご丁寧にありがとうございました。ご親切な解説痛み入ります。

元々JavaScriptを少し学習したのみで、Reactの書き方については、ほぼ知識がないまま書き進めてしまった事が今回のようなエラーの原因だとご指摘を読んで分かりました。

Hookの存在もお恥ずかしながら今知った位でして、ネットを参考にしながら騙し騙し書いていた事が露呈してしまったなという印象です。

今回のような前提知識のないままの書き方では、後々負債が溜まるであろうことが分かりましたのでご指摘を参考にしながら書き直していきたいと思います。

質問に対する回答とreactの書き方について根本的な部分からご丁寧に教えて頂きありがとうございました。