I'm trying to use useState in functional component in react framework. But I am getting this error. What would be the reason?

App.js

import useState from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import Form from './components/Form';

function App() {

  const [todos, setTodos] = useState({ id: 1, todo: "Todo1" }, { id: 2, todo: "Todo2" });
  return (
    <div className="row justify-content-center">
      <div className="col-lg-6 col-md-7 col-9">
        <Header />
        <Form onClick={() => setTodos()} />
        <TodoList todos={todos} />

      </div>
    </div>
  );
}

export default App;

TodoList.js:

import ListItem from './TodoListItem';
export default function TodoList(props) {
    return (
        <div>
            {props.todos.map((todo) => <ListItem todo={todo} />)}
        </div>
    )
}

TodoListItem.js

import styles from '../sass/todoListItem.module.scss';
export default function TodoListItem({ todo }) {
    return (
        <div className={`card ${styles.title}`}>
            {todo}
        </div>
    )
}

I'm trying to use useState in functional component in react framework. But I am getting this error. What would be the reason?

App.js

import useState from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import Form from './components/Form';

function App() {

  const [todos, setTodos] = useState({ id: 1, todo: "Todo1" }, { id: 2, todo: "Todo2" });
  return (
    <div className="row justify-content-center">
      <div className="col-lg-6 col-md-7 col-9">
        <Header />
        <Form onClick={() => setTodos()} />
        <TodoList todos={todos} />

      </div>
    </div>
  );
}

export default App;

TodoList.js:

import ListItem from './TodoListItem';
export default function TodoList(props) {
    return (
        <div>
            {props.todos.map((todo) => <ListItem todo={todo} />)}
        </div>
    )
}

TodoListItem.js

import styles from '../sass/todoListItem.module.scss';
export default function TodoListItem({ todo }) {
    return (
        <div className={`card ${styles.title}`}>
            {todo}
        </div>
    )
}

• javascript
• reactjs

2 Answers 2

This is because useState is not the default export from the react package.

To import specific modules from a package you should use the curly brace syntax. Try using import { useState } from 'react';

More information on import syntax can be found here

you must add your component this :

import { useState } from 'react';

useState into {} like this : { useState }