react render とreturn の違い

Question

jsxのファイルをtsx＆Hooksに書き直していて詰まったところがあるので教えて欲しいです。
*コードを一部抜粋して載せています。
return ( の中には画面で表示させるコンポーネント(html)、stateが変わった時に表示させたいもの(html)を書くと思いますがrender(のなかの関数内に書かれているhtmlはreturn内に書かれているのとはどう違うのでしょうか？
またtsx＆hooksに直す最中に
Cannot find name 'render'.ts(2304)というエラーが出ているのですがこれはどういう時になるエラーなのでしょうか？
ざっくりとした質問ですいませんがわかる方がいましたら教えて欲しいです。

interface IState {
    // 使うstateの型を定義している
  };
  
  const index: FC<Props> = () => {
    const [state, setState] = useState<IState>({
     // 使うstateを書いている
    });
    　const  renderGroupName = (names) => {
      return names.map((name, i) =>
        <span key={i} className="">
          {name}
        </span>
      );
    }
  
    const onChange = (key: string, value: number) => {
      setState({
        ...state,
        groups: Object.assign({}, this.state.groups, { [key]: value })
      });
    }
  
    render() {
      const { newGroup } = this.state;
  
      const groupsNode = state.selectGroup.map((group, index) => (
        <p key={index} >
          {Index.renderGroupName(group.pathNames)}
          <span
            className="close-btn"
            onClick={() => onClickGroup(group, 'selectGroups')}
          >×</span>
        </p>
      ));
  
      const addModal = (
        <AddModal
          open={state.isShowModal}
          onClick={() => this.onClickCloseModal('Close')}
          onClickAddGroupFunc={onClickGroups}
        />
      );
  
      return (
        <div className="bottom-margin">
          <div className="input-form">
            <div className="caption-small">
              名前
            </div>
            <div className="pr4">
              <input
                className="textfield__input"
                placeholder="姓"
                value={newGroup.lastName}
                onChange={(e) => onChange('Name', e.target.value)}
              />
            </div>
            <Button className="mdl-button" onClick={onClickAddNew} >
              登録する
            </Button>
            </div>
          </div>
          {addModal}
      );
      }

Answer 1

色々と勘違いされていると思います。
まず、大前提として、render関数が必要なのは class component のみで、function component には render 関数は必要ありません。
class component の render 関数の戻り値と function component の戻り値は同じように扱われます。
したがって、function component 内でrender 関数を書く意味はありません。

Cannot find name 'render'.ts(2304)というエラーが出ているのですがこれはどういう時になるエラーなのでしょうか？

こちらは render 関数が定義されていない場合にでます。
class component では render 関数を定義することが必須要件なので、定義していない場合はこういったエラーが出ます。

Comments

[whiwhdiw]

ありがとうございます。
hooksはクラスコンポーネントを書かずに関数コンポーネントをクラスのように扱えるもので
renderが使えるのはクラスコンポーネントだけなのでHooksを使う場合はrender()が使えない？？というかいらないという考え方であってますか？

[nerianighthawk]

はい、その認識でいいと思います。
そのかわり、function component では return が必要です

[whiwhdiw]

ありがとうございます。
renderの中に書いてあるhtmlをreturnの中に書けばいいのですね。