Cuando compilo la aplicación, aparece esta advertencia en la consola:

Advertencia: las funciones no son válidas como hijo de React. Esto puede suceder si devuelve un Componente en lugar de hacerlo desde el procesamiento. O tal vez quisiste llamar a esta función en lugar de devolverla.

Mi aplicación.js:

 import "./App.css"; import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { toDoList: [], activeItem: { id: null, title: "", completed: false, }, editing: false, }; this.fetchTasks = this.fetchTasks.bind(this); } componentWillMount() { this.fetchTasks(); } fetchTasks() { console.log("Fetching..."); fetch("http://127.0.0.1:8000/api/task-list/") .then((response) => response.json()) .then((data) => this.setState({ toDoList: data, }) ); } render() { var tasks = this.state.toDoList; return ( <div className="container"> <div id="task-container"> <div id="form-wrapper"> <form id="form"> <div className="flex-wrapper"> <div style={{ flex: 6 }}> <input className="form-control" type="text" name="title" placeholder="Add task" /> </div> <div style={{ flex: 1 }}> <input className="btn btn-warning" id="submit" type="submit" name="Add" /> </div> </div> </form> </div> <div className="list-wrapper"> { (tasks.map = (task, index) => { return ( <div key="{index}" className="task-wrapper flex-wrapper"> <span>{task.title}</span> </div> )}) } </div> </div> </div> ); } } export default App;

Básicamente, estoy tratando de enumerar los elementos en la lista de API, pero me falta algo. ¿Alguien me ayuda con eso?