When i compile the app i get this warning in the console:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
My App.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;
Basically i'm trying to list the items in the api list but i'm missing something. Anyone help me with it?
(tasks.map = (task, index) => {
return (
<div key="{index}" className="task-wrapper flex-wrapper">
<span>{task.title}</span>
</div>
)})
Should be:
(tasks.map(task, index) => {
return (
<div key="{index}" className="task-wrapper flex-wrapper">
<span>{task.title}</span>
</div>
)})