質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

680閲覧

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

newso

総合スコア1

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2023/01/11 13:42

前提

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.

該当のソースコード

JavaScript

1import { useState, useRef } from 'react'; 2import TodoList from './TodoList.jsx'; 3import './App.css'; 4 5function App() { 6 7 const [todos, setTodos] = useState([]); 8 const [clickCnt, setCnt] = useState(0); 9 10 const todoNameRef = useRef(); 11 12 const click_cnt = () => { 13 setCnt(clickCnt + 1); 14 }; 15 16 17 const handleAddTodo = () => { 18 //タスクを追加する。 19 const name = todoNameRef.current.value; 20 if(name === '') return false; 21 click_cnt(); 22 setTodos((prevTodos) => { 23 return [...prevTodos, {id: clickCnt, name: name, completed: false}]; 24 }); 25 todoNameRef.current.value = null; 26 }; 27 28 const toggleTodo = (id) => { 29 const newTodos = [...todos]; 30 const todo = newTodos.find((todo) => todo.id === id); 31 console.log(todo); 32 todo.completed = !todo.completed; 33 setTodos(newTodos); 34 }; 35 36 const cntRemainTask = () => { 37 return todos.filter((todo) => !todo.completed).length; 38 }; 39 40 return ( 41 <> 42 <TodoList todos={todos} toggleTodo={toggleTodo} /> 43 <input type="text" ref={todoNameRef}/> 44 <button onClick={handleAddTodo}>タスクを追加</button> 45 <button>完了したタスクの削除</button> 46 <div>残りのタスク:{cntRemainTask()}</div> 47 </> 48 ); 49} 50 51export default App;

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

tsx

1 2const Example = () => { 3 4 const handleOnclick = (e: any) => { 5 console.log(e) 6 } 7 8 const foo = (val: string) => { 9 return val 10 } 11 12 const bar = "Variable" 13 14 return ( 15 <> 16 <div> 17 <button onClick={handleOnclick}>button</button> 18 19 </div> 20 <div>{foo("Argument")}</div> 21 <div>{bar}</div> 22 </> 23 ); 24} 25export default Example;

投稿2023/01/11 14:00

編集2023/01/11 14:04
yuma.inaura

総合スコア1451

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newso

2023/01/13 14:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問