REACT Why do I get the error "Uncaught TypeError: createTask is not a function" when calling a function passed as a parameter?

Question

I am getting this error when passing a function as props to a component. But I can't figure out what's going on. Thanks in advance

import {useState} from 'react'

function TaskForm(createTask) { const [title, setTitle] = useState('');

const handleSubmit = (e) =>{
    e.preventDefault();
    const newTask = {
        title
    };
    createTask(newTask)
}

return (
        <form onSubmit={handleSubmit}>
            <input placeholder="Escribe tu tarea"
                onChange={(e)=> setTitle(e.target.value)}
            />
            <button>
                Guardar
            </button>
        </form>
)

}

export default TaskForm

import TaskList from './TaskList' import TaskForm from './TaskForm' import {tasks as data} from './tasks' import {useState,useEffect} from 'react'

function App (){ const [tasks, setTasks] = useState([]);

useEffect(()=>{
    setTasks(data);
},[]);
function createTask(task){
    setTasks([...tasks,task])
} 

return (
    <>
        <TaskForm createTask={createTask}/>
        <TaskList tasks={tasks}/>
    </>
)

}

export default App;

Answer 1

Try to get data from props via destructuring as we are getting props as object

import {useState} from 'react'

function TaskForm({ createTask }) { 
const [title, setTitle] = useState('');

const handleSubmit = (e) =>{
    e.preventDefault();
    const newTask = {
        title
    };
    createTask(newTask)
}

return (
        <form onSubmit={handleSubmit}>
            <input placeholder="Escribe tu tarea"
                onChange={(e)=> setTitle(e.target.value)}
            />
            <button>
                Guardar
            </button>
        </form>
)
}

or you can try as:

import {useState} from 'react'

function TaskForm(props) { 
const { createTask } = props;
const [title, setTitle] = useState('');

const handleSubmit = (e) =>{
    e.preventDefault();
    const newTask = {
        title
    };
    createTask(newTask)
}

return (
        <form onSubmit={handleSubmit}>
            <input placeholder="Escribe tu tarea"
                onChange={(e)=> setTitle(e.target.value)}
            />
            <button>
                Guardar
            </button>
        </form>
)
}

Answer 2

App.js

import { useState } from "react";
import TaskForm from "./component/Comp1";
import TaskList from "./component/Comp2";
import "./styles.css";

export default function App() {
  const [tasks, setTasks] = useState([]);
  const creteTask = (newTasks) => {
    setTasks([...tasks, newTasks]);
  };
  return (
    <div className="App">
      <TaskForm creteTask={creteTask} />
      <TaskList tasks={tasks} />
    </div>
  );
}

TaskForm.js

import { useState } from "react";
export default function TaskForm({ creteTask }) {
  const [title, setTitle] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    creteTask(title);
    setTitle("");
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          placeholder="Escribe tu tarea"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <button>Guardar</button>
      </form>
    </div>
  );
}

TaskList.js

export default function TaskList({ tasks }) {
  console.log(tasks);
  return (
    <div>
      <h3>Tasks</h3>
      {tasks.map((task, i) => (
        <p key={i}>{task}</p>
      ))}
    </div>
  );
}