react.js - JSXにおける波括弧内の関数について、()をつけるタイミングが分からない

Question

前提

React.jsを用いて簡単なTodoリストを作成している際に浮かんだ疑問です。

疑問点

returnの部分(40行目~)について、
{todoNameRef}や、{handleAddTodo}には()がついていなくてもコンソールにエラーは出ないのですが、
{cntRemainTask()}には()をつけないとエラーが出てしまいます。
なぜなのでしょうか？

{cntRemainTask}とした際のエラー

react-dom.development.js:86 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.

該当のソースコード

import { useState, useRef } from 'react';
import TodoList from './TodoList.jsx';
import './App.css';

function App() {

	const [todos, setTodos] = useState([]);
	const [clickCnt, setCnt] = useState(0);

	const todoNameRef = useRef();

	const click_cnt = () => {
		setCnt(clickCnt + 1);
	};


	const handleAddTodo = () => {
		//タスクを追加する。
		const name = todoNameRef.current.value;
		if(name === '') return false;
		click_cnt();
		setTodos((prevTodos) => {
			return [...prevTodos, {id: clickCnt, name: name, completed: false}];
		});
		todoNameRef.current.value = null;
	};

	const toggleTodo = (id) => {
		const newTodos = [...todos];
		const todo = newTodos.find((todo) => todo.id === id);
		console.log(todo);
		todo.completed = !todo.completed;
		setTodos(newTodos);
	};

	const cntRemainTask = () => {
		return todos.filter((todo) => !todo.completed).length;
	};

	return (
		<>
			<TodoList todos={todos} toggleTodo={toggleTodo} />
			<input type="text" ref={todoNameRef}/>
			<button onClick={handleAddTodo}>タスクを追加</button>
			<button>完了したタスクの削除</button>
			<div>残りのタスク:{cntRemainTask()}</div>
		</>
	);
}

export default App;

お手数ですが、ご回答のほうよろしくお願いいたします。

Answer 1

foo は変数
bar() は関数実行

onClick={handleOnclick} は関数実行の指定だが引数にはイベント情報的なものが渡るので直接の引数指定は不要

的なノリじゃないですかね

const Example = () => {

  const handleOnclick = (e: any) => {
    console.log(e)
  }

  const foo = (val: string) => {
    return val
  }

  const bar = "Variable"

  return (
    <>
      <div>
        <button onClick={handleOnclick}>button</button>

      </div>
      <div>{foo("Argument")}</div>
      <div>{bar}</div>
    </>
  );
}
export default Example;

Comments

[newso]

ありがとうございました。