React.jsでReactHooksを使いたい

Question

作りたいもの

Todoリストと電卓をフロントエンドのみで実装したい.
Reactやjavascriptの初心者なので教えていただきたいです.

考えているコンポーネント構造

app - todo 
           - form
           - list
    -calclater

わからないこと

• ReactHooksを呼び出すのはトップレベルのファイルでないといけない(App.jsxでしか呼び出せない）のでstate管理をしたいTodo.jsxでuseStateを呼び出せない

• そもそもこのような構造をReactで作れないのか

コード

App.jsx

import React from "react";
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Navbar from "./Navbar";
import Home from './Home';
import Todo from './Todo';

const App = () => {
  return(
    <div className="App">
      <Router>
        <div>
          <Navbar/>
          <Route exact path="/" component={Home}/>
          <Route path="/Todo" component={Todo}/>
        </div>
      </Router>

</div>

  )
}

export default App;

Home.jsx

const Home = () => {
    return(
        <h1> HOMEです。</h1>
    )
};

export default Home;

Navbarは省略します。

Todo.jsx

import { useState } from 'react'
import Form from 'Form';
import List from 'List';
const [todoList, setTodoList] = useState([]);
const Todo = () => {
    const addTodoList = (Title, Content) => {
        setTodoList(todoList.concat({"title": Title, "content": Content}))
    }

    const deleteTodoList = (index) =>{
        setTodoList((item => todoList[index] !== item))
    }

    return (
        <div className="p-3 mb-2 bg-info text-white">
            <Form addTodoList={addTodoList}/>
            <List todos={todoList} deleteTodoList={deleteTodoList}/>
        </div>
    )
}

export default Todo;

Form.jsx

const Form = (props) => (
  <form onSubmit={props.addTodoList}>
    <div className="form-group row">
      <label className="col-sm-2 col-form-label">Your todo:</label>
      <input name="title" type="text" className="siimple-input" />
      　
      <input type="submit" value="Add" className="btn btn-secondary btn-sm" />
    </div>
  </form>
);

export default Form;

List.js

import React from "react";

let style = { maxWidth: "700px" };

const List = (props) => (
  <ul className="siimple-list">
    {props.todos.map((todo, i) => {
      return (
        <div className="container">
          <li
            key={i}
            className="list-group-item list-group-item-info"
            style={style}
          >
            {todo.title}{" "}
          <div className="float-right">
            <button type="button" className="btn btn-danger btn-sm" onClick={() => props.deleteTodoList(i)}>delete</button>
          </div>
          </li>
        </div>

      );
    })}

  </ul>
);

export default List;

styleはほぼbootstrapに任せてます。
よろしくお願いします

追記

Todo.jsxで以下のようなエラーが出ます。

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

Comments

[hoshi-takanori]

「ReactHooksを呼び出すのはトップレベルのファイルでないといけない」なんてことはありません。各関数コンポーネントで使えます。関数コンポーネントのトップレベルで呼び出す必要があるというのを誤解したのでは。todo と calculator が互いに情報のやり取りをしないなら、それぞれローカルな state を持てばいいだけですね。

[butsuli_shine]

ありがとうございます。
そうなのですね。
よく理解できていないのですが質問の追記の方でエラーメッセージを張り付けるのでどういう意味かよくわからないので、教えていただけたら幸いです。

Answer 1

useStateなどのHooksは、関数コンポーネントの中に書く必要があります。ファイルのトップレベルに置いても動きません。

Comments

[butsuli_shine]

ありがとうございました、関数内で呼び出さないといけないということに気づいていませんでした。
本当に助かりました。