App.js:12 Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useState) is not a function or its return value is not iterable

Question

I am working on a project API Ui patterns project for class where i am pulling from a Api and rendering through tab components, I originally had everything populating through the console and page. but when i started work on the state of my tabs everything disappear and i got that weird error that seemed to highlight the use state property in my app.js file. I was originally also using <Tabs/> to render everything and its not working anymore... I Cant understand why this is happening.

import Tabs from './Components/Tabs'
import React, { useState, useEffect } from 'react';
import './index'
import './App.css';




function App() {
    //API URL From Stranger things Quotes
      const URL = 'https://strangerthings-quotes.vercel.app/api/quotes/5';
      const [quotes, setQuotes] = useState([])
  
      //Fetching Data from API
    function getQuotes () {
      fetch(URL)
      
    .then(response => response.json())
    .then(data => setQuotes(data))
  }
  useEffect(getQuotes, []);
 console.log(quotes)
  
 //Getting data to populate on Page using .map 
 // Author would'nt pop up from array added my own little extra edit
 //rendering Tabs from Tab Component to main page(App.js)
 return(
  <main className="App">
  

    <h1 className='heading'>Stranger Things Quotes</h1>
  <div className='quotes'></div>
  {quotes.map((quotes, index) => (
    <li key={index}> {quotes.quote} Author: {quotes.author}</li>
  )
 )}
 <Tabs/>

  </main>

   );
}

export default App;

import { useState } from 'react';
import './Tabs.css'

//Creating Tabs for the UI and using state

function Tabs () {
 const [toggleState, setToggleState] = useState=(1)

const toggleTab = (index) => {
    setToggleState(index);
}


    return(

<div className="container">
            
        <div className='nav-tabs'>

    <button className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(1)}>Tab 1</button>
   
    <button className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(2)}>Tab 2</button>
        
    <button className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(3)}>Tab 3</button>

    <button className={toggleState === 4 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(4)}>Tab 4</button>
        </div>

    
        <div className="content-tabs">
            <div className="content active-content">
            <h2>Quotes set 1:</h2>
            <p>data array </p>
            </div>
            </div>

        <div className="content">
            <h2>Quotes set 2:</h2>
            <p>data array </p>
            </div>
            
        
        <div className="content">
            <h2>Quotes set 3:</h2>
            <p>data array </p>
            </div>
            
        <div className="content">
            <h2>Quotes set 4:</h2>
            <p>data array </p>
            </div>
        
        
        </div>
        
    );
}
export default Tabs;

Answer 1

In your Tabs component you have the following issue:

function Tabs () {
 // you have `=` sign after useState. Remove that and error should be gone
 const [toggleState, setToggleState] = useState=(1) // this should be useState(1) 

 const toggleTab = (index) => {
    setToggleState(index);
 }
 // ... comp body