размещение компонента внутри return в reactjs

Question

Я новичок в React.js, и я немного запутался в компонентах в React, можем ли мы просто вставить код компонента вместо того, чтобы создавать компонент, здесь у меня (простой список задач) сначала два кода один работает правильно, а второй я немного изменил, но он не работает, или я делаю это неправильно?

Вот 1:

import React, { useState } from 'react';
import './App.css';

function Todo({ tod, index }) {
  return <div className="todo">{tod.text}</div>
}

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');



  return (

    <form>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => setValue(e.target.value)}

      />

    </form>
  )
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  }

  return (
    <div className="app">
      <div className="todo-List">
        {todos.map((todo, index) =>
          <Todo key={index} index={index} tod={todo} />
        )}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  )
}
export default App;

И вот как я изменил этот код, взяв все из функции TodoForm и вставив его в ответ 2:

import React, { useState } from 'react';
import './App.css';

function Todo({ tod, index }) {
  return <div className="todo">{tod.text}</div>
}


const [value, setValue] = useState('');





function App() {
  const [todos, setTodos] = useState([
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  }

  return (
    <div className="app">
      <div className="todo-List">
        {todos.map((todo, index) =>
          <Todo key={index} index={index} tod={todo} />
        )}

        <form>
          <input
            type="text"
            className="input"
            value={value}
            placeholder="Add Todo..."
            onChange={e => setValue(e.target.value)}

          />

        </form>
      </div>
    </div>
  )
}
export default App;

Я хочу, чтобы второй код работал как первый, поэтому я удалил компонент и вернул его коды. Я получаю сообщение об ошибке:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Answer 1

Если я правильно понял ваш вопрос, да, вы можете извлекать компоненты в функции.

Что касается того, почему он не работает, вам нужно будет немного подробнее c на что точно не работает.

Вы можете отформатировать свой код так:

import React, { useState } from 'react';
import './App.css';

function Todo({ text, index }) {
  return <div className="todo">{text}</div>
}

function TodoForm({ addTodo }) {
  const [value, setValue] = useState(''); // what is `addTodo` used for? maybe you do not need `value`
 
  return (
    <form>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => addTodo(e.target.value)}

      />
    </form>
  )
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    },
    {
      text: ' Learn about react',
      isCompleted: false
    }
  ]);

  const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  }

  return (
    <div className="app">
      <div className="todo-List">
        {todos.map((todo, index) =>
          <Todo key={index} index={index} text={todo.text} />
        )}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  )
}
export default App;

Что-то еще, что вы можете сделать, это:

const Todo = ({ text, index }) => (
  return <div className="todo">{text}</div>
)

const TodoForm = ({ addTodo }) => (
    <form>
      <input
        type="text"
        className="input"
        value={value}
        placeholder="Add Todo..."
        onChange={e => addTodo(e.target.value)}

      />
    </form>
)

Answer 2

Вам нужно переместить const [value, setValue] = useState(''); внутри функции приложения:

function App() {
  const [value, setValue] = useState('');
//...
}