Getting Error while using useState() method

Question

when i am trying to use state in my react component, this error comes and i dont know how to solved it, i also have googled it but i dont found any solution.

this is my code below

import useState from 'react';
import ExpenseForm from './ExpenseForm';
import './NewExpenses.css';

const NewExpenses = (props) => {
   const [isEditing, setIsEditing] = useState(false);

   const saveExpenseDataHandler = (newExpenseData) => {
      const expenseData = {
         id : Math.random().toString(),
         ...newExpenseData
      }
      props.onCreateExpense(expenseData);
      setIsEditing(false);
   };

   const startEditingHandler = () => {
      setIsEditing(true);
   };

   const stopEditingHandler = () => {
      setIsEditing(false);
   };

   return (
      <div className="new-expense">
          {!isEditing && (
              <button onClick={startEditingHandler}>Add New Expense</button>
          )}
          {isEditing && (
              <ExpenseForm
                  onSaveExpenseData={saveExpenseDataHandler}
                  onCancel={stopEditingHandler}
              />
          )}
      </div>
  );
};

export default NewExpenses;

Thanks In Advance...

score 2 · Accepted Answer · answered Jun 03 '21 at 19:32

2

Fix your importing useState:

import {useState} from 'react';

answered Jun 03 '21 at 19:32

MHP

577
5
9

score 1 · Answer 2 · answered Jun 03 '21 at 19:36

Like MHP said: you are importing useState without curly braces. This only works if useState was exported from "react" as a default export, which is not the case. The default export from "react" is React while useState is a named export. See this answer for more info.

Getting Error while using useState() method

2 Answers2