Как вывести данные на страницу React JS?

Question

[depstor]

import React, { useState } from 'react';
import { Form, Input, Button, Card } from 'antd';
import style from '../../index.scss';

const App = () => {

const [todos, setTodos] = useState('');



const onFinish = values => {
  const newTodoItem = {title: values.todoTitle, complete: false}
  const newTodos = [...todos, newTodoItem]
  setTodos(newTodos)
  console.log(newTodoItem)
}

  return (
      <>
      <h1 className={style.title}>To-Do</h1>
      <div>
    <Form
      name="basic"
      onFinish={onFinish}
      style={{ width: 200 }}
    >
      <Form.Item
        name="todoTitle"
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Add
        </Button>
      </Form.Item>
    </Form>
    </div>
    <ul><li>oooo</li></ul>
    </>
  );
};

export default App;
Добрый день, подскажите как вывести данные на страницу в функции onFinish я получаю новые todo items  но как их отрендарить я не понимаю, может кто объяснит и подскажет что почитать ?

Answer 1

[Aleks0123456789]

https://www.robinwieruch.de/react-hooks-fetch-data
https://codesandbox.io/s/jvvkoo8pq3
https://ru.reactjs.org/docs/hooks-faq.html#how-can...

<ul>{
todos.map(todo=>(
<li key={todo.id}>{todo}</li>
))
}</ul>

Comments

[depstor]

TypeError: todos.map is not a function

[uRoot]

depstor, посмотрите есть ли метод map у вашего todos

[depstor]

CryNet, весь компонент , я выложил в вопросе, что значит посмотреть есть ли метод map?

[Aleks0123456789]

depstor,
Вот это исправьте
const [todos, setTodos] = useState('');
на это
const [todos, setTodos] = useState([]);
Вы инициализируете массив строкой.

[depstor]

Aleks0123456789,
×
Error: Objects are not valid as a React child (found: object with keys {title, complete}). If you meant to render a collection of children, use an array instead.
это проклятый todo какой то , я пытался подставить index но не срабатывает , может нужно написать функцию которая будет рендерить id ?

[Aleks0123456789]

depstor, можете попробовать todo.title, если они разные или нормализовать массив.
https://ru.reactjs.org/docs/lists-and-keys.html

[depstor]

Aleks0123456789, Спасибо за помощь, буду разбираться

[depstor]

Aleks0123456789, ели изменить строку с начальным state то ругается на setTodos(newTodos)
×
Error: Objects are not valid as a React child (found: object with keys {title, complete}). If you meant to render a collection of children, use an array instead.