Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

124
Visualizações
Warning: Functions are not valid as a React child- List items does not show up

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?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

(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>
                )})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda