I called a function setTodos from the parent in my child ponents, but this returns the following error:

setTodos is not a function

Can you explain me why this happened, thanks a lot. Here is my code:

import React, { useState } from 'react';
import './App.css';
import Form from './ponents/Form';
import TodoList from './ponents/TodoList';

function App() {
   const [inputText, setInputText] = useState("");
   const [todos, setTodos] = useState([]);
   return (
      <div className="App">
         <header>
            <h1>Phuc's Todo list</h1>
         </header>
         <Form inputText={inputText} todos={todos} setTodos={setTodos}/>
         <TodoList/>
      </div>
   );
}

export default App;

import React from 'react';

const Form = ({inputText, setInputText, todos, setToDos}) => {
   const inputTextHandler = (e) => {
      setInputText(e.target.value);
   }
   const submitTodoHandler = (e) => {
      e.preventDefault();
      setToDos([
         ...todos,
         {text: inputText, pleted: false, id: Math.randowm()*1000}
      ])
   }
   return (
      ...
   )
}

I called a function setTodos from the parent in my child ponents, but this returns the following error:

setTodos is not a function

Can you explain me why this happened, thanks a lot. Here is my code:

import React, { useState } from 'react';
import './App.css';
import Form from './ponents/Form';
import TodoList from './ponents/TodoList';

function App() {
   const [inputText, setInputText] = useState("");
   const [todos, setTodos] = useState([]);
   return (
      <div className="App">
         <header>
            <h1>Phuc's Todo list</h1>
         </header>
         <Form inputText={inputText} todos={todos} setTodos={setTodos}/>
         <TodoList/>
      </div>
   );
}

export default App;

import React from 'react';

const Form = ({inputText, setInputText, todos, setToDos}) => {
   const inputTextHandler = (e) => {
      setInputText(e.target.value);
   }
   const submitTodoHandler = (e) => {
      e.preventDefault();
      setToDos([
         ...todos,
         {text: inputText, pleted: false, id: Math.randowm()*1000}
      ])
   }
   return (
      ...
   )
}

• javascript
• reactjs

Share Improve this question Follow edited Jun 18, 2021 at 8:03 shaedrich 5,75533 gold badges2929 silver badges4747 bronze badges asked Jun 18, 2021 at 7:07 phuc lephuc le 5111 silver badge33 bronze badges 2

• Hey, If you want to use parent's state function I would suggest use it as wrapper function. You can check this post.. stackoverflow./a/29101393/8348558 – deepchudasama Commented Jun 18, 2021 at 7:13
• 1 Please post all relevant code in your question. Screenshots alone are not good enough. – Yoshi Commented Jun 18, 2021 at 7:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

There is a typo in your code while calling the setTodos in child ponent

It should be setTodos in child instead of setToDos. You have capital D, It should be small d.

As Javascript is case sensitve langauge. So you have to use the exact term.

setTodos([//here your code]);

In your parent ponent, setTodos need to be a callback if you want to do it that way.

Try with setTodos={(newTodos) => setTodos(newTodos)} inside your of parent ponent.

You are passing the setTodos as a prop into your child ponent. So, probably you are calling there setToDos instead setTodos.