-1

I am getting the following error every time I try to use react hooks in my funtiom:

TypeError: react__WEBPACK_IMPORTED_MODULE_1___default is not a function or its return value is not iterable

Following is my code:

import './RouteDetails.css';
import useState from 'react';
...
...
..


export default function RouteDetails() {
    const [show, setShow] = useState(false);


    return(
        <div>       
                    <Row className="route-details-heading">
                        <Col className="d-none d-sm-block" md={4}><b>Route Name</b></Col>
                        <Col className="d-none d-sm-block" md={4}><b>Difficulty</b></Col>
                        <Col className="d-none d-sm-block" md={1}><b>Length</b></Col>
                        <Col className="d-none d-sm-block" md={1}><b>Time</b></Col>
                    </Row>
        </div>
    )
 }

React and React-dom is of the same version. Can anyone please tell me what I am doing wrong here? Also, I am not using jest

Sumanth Jois
  • 3,146
  • 4
  • 27
  • 42
  • Check [this](https://stackoverflow.com/a/36796281/2873538) and [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module). – Ajeet Shah Feb 25 '21 at 10:09
  • The default export from `"react"` is conventionally named `React`, it's not the hooks. – jonrsharpe Feb 25 '21 at 10:09

1 Answers1

1

Try importing useState like import { useState } from 'react'. It is not a default.

AdriSolid
  • 2,570
  • 1
  • 7
  • 17