TodoList React || Ошибка, возможно синтаксис

248

06 августа 2021, 15:40

Два дня ломаю голову, не могу найти ошибку, гуру React помогите. Вот код -

"use strict";
function TitleName(props) {
    return <h1 className="TitleName">TitleName</h1>;
}
class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tasksArray: [],
            value: ''
        }
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }
    onChange(e) {
        this.setState({
            value: e.target.value
        });  
    }
    onSubmit(e) { 
        e.preventDefault();
        const newItem = {
            value: this.state.value,
            id: this.state.tasksArray.length
        };
        this.setState(e => ({
            tasksArray: e.tasksArray.concat(newItem),
            value: ''
        }));
    }
    render() {
        return (
            <div>
            <TitleName/>
                <form onSubmit={this.onSubmit}>
                    <input placeholder="Введите задачу" value={this.state.value} onChange={this.onChange}/>
                    <input type="submit" value="Добавить задачу"/>
                </form>
            <TodoTask tasks={this.state.tasksArray}/>  
            </div>          
        );
    }
}
class TodoTask extends React.Component {
    render() {
        const tasks = this.props.tasks.forEach(currentValue => {
            return (
               <li key={currentValue.id}>
                    {currentValue.value}
                    <button type="submit" id={currentValue.id}>Delete</button>
                </li>   
            );
        });
        return (
            <ul>
                {tasks}
            </ul>  
        );
    }
}
ReactDOM.render(
    <TodoList />,
    document.querySelector("#main")
);

Задачи tasks не выводятся, ul тэг есть, а li - нет.

Answer 1

Проблема в том, что в методе рендеринга Вы использовали метод forEach():

Метод forEach() выполняет указанную функцию один раз для каждого элемента в массиве. Возвращаемое значение - undefined.

Метод forEach() ничего не возвращает, поэтому Вы не видите <li>...</li> тэгов. Для того, чтобы их увидеть - необходимо использовать метод map():

Метод map() создаёт новый массив с результатом вызова указанной функции для каждого элемента массива. Возвращаемое значение - новый массив, где каждый элемент является результатом callback функции.

Таким образом Ваш код должен выглядеть примерно так (можно обойтись без переменной tasks и мапить результат сразу, но это уже другая история):

render() {
  const tasks = this.props.tasks.map(currentValue => {
    return (
      <li key={currentValue.id}>
        {currentValue.value}
        <button type="submit" id={currentValue.id}>Delete</button>
      </li>   
    );
  });
  return (
    <ul>
      {tasks}
    </ul>  
  );
}