unable to use useState hook in my Component, i get the following error,

Question

I am unable to use the useState hook in this component, i can use it in the LandingPage component as seen in the routes above but cannot use it in the fatburner component

the error message is React Hook "useState" is called in function "fatburner" which is neither a React function component or a custom React Hook function

My Routes Main.js

import LandingPage from './LandingPage'
import { Route, Switch } from 'react-router-dom'
import Headings from './headings'
import Protein from './Proteins/protein';
import Fatburner from './Fatburners/fatburners';

const main = (props) => {
    return (
        <div>
            <Switch>
                <Route path='/'
                    exact
                    component={LandingPage}
                />
                <Route path='/protein'
                    exact
                    component={Protein}
                />
                <Route path='/fatburner'
                    exact
                    component={Fatburner}
                />
                {/* <Route
                    // component={NoMatch}
                    render={() => (<h4>does not exist</h4>)}
                /> */}
            </Switch>

        </div>
    )
}

export default main

fatburner.js

import Navbar from '../../../components/Navbar/Navbar'
import Itemcard from '../../../components/itemcard/itemcard';
import { Col, Row, Container, InputGroup } from 'react-bootstrap';



const fatburner = (props) => {
    const [count, setCount] = useState({});

    const fatburnerData =
        [
            { brand: "Muscle Blaze", img: "https://images-na.ssl-images-amazon.com/images/I/61%2Botc5mYSL._SX466_.jpg", text: "Muscleblaze Fat Burner 910 Mg , 90 Capsules Unflavoured", price: 410, previous: 599 },
            { brand: "Muscle Blaze", img: "https://img10.hkrtcdn.com/9868/prd_986779-MuscleBlaze-Keto-Burner-60-capsules-Unflavoured_o.jpg", text: "MuscleBlaze Keto Burner, Fat Burner 60 capsules, Unflavoured", price: 900, previous: 1299 },
            { brand: "Evogen", img: "https://img4.hkrtcdn.com/11741/prd_1174013-Evogen-Lipocide-X-Fat-Burner-60-capsules-Unflavoured_o.jpg", text: "Evogen Lipocide X Fat Burner, 60 capsules, Unflavoured", price: 2800, previous: 3500 },
            { brand: "MuscleTech", img: "https://img6.hkrtcdn.com/2734/prd_273315_o.jpg", text: "MuscleTech Hydroxycut Hardcore Next Gen, 100 capsules, Unflavoured", price: 2900, previous: 3000 }
        ]
    const fatburnerRow = fatburnerData.map((ele, index) => {
        return (
            <Col sm={3} key={index}>
                <Itemcard
                    img={ele.img}
                    text={ele.text}
                    price={ele.price}
                    prevPrice={ele.previous}
                />
            </Col>
        )
    })

    let filteredBrand = [];
    let priceFilter = fatburnerData.map((ele, index) => {
        console.log(ele.brand)
        if (filteredBrand.indexOf(ele.brand) == -1) {
            filteredBrand.push(ele.brand)
        }
        console.log(filteredBrand, "filtered")
    })
    let mapFilterBrand = [];
    if (filteredBrand.length > 1) {
        mapFilterBrand = filteredBrand.map(ele => {
            return (
                <InputGroup className="mb-3">
                    <InputGroup.Checkbox aria-label="Checkbox for following text input"
                        label={ele}
                        value={ele}
                    />{ele}
                </InputGroup>
            )
        })
    }
    // const [brandfilter, setBrandFilter] = React.useState([]);
    return (

        <div>
            <Navbar />
            <Container fluid={true} style={{ marginTop: '65px' }}>
                <Row>
                    <Col sm={2}>
                        <h5 style={{ textAlign: 'center' }}>Filters</h5>
                        {priceFilter}
                        {mapFilterBrand}
                    </Col>
                    <Col sm={10} >
                        <Row>
                            {fatburnerRow}
                        </Row>
                    </Col>

                </Row>
            </Container>

        </div>
    )
}

export default fatburner;```

Answer 1

You should not call hooks from regular javascript functions.

You can transform the function into a React Function component by doing the following... Rename fatburner to Fatburner . So you'll have const Fatburner = (props) => {...

Read more here - https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions