How to set data from a react hook inside of a function or event?

Question

I'm trying to learn to create hooks so I can re-use data that I have to change in different components.

I'm using Material UI's Tabs and need to use useTab, a custom hook to change the tab id.

import React, { useContext } from 'react';
import { ProductsContext } from './ProductsContext';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { useTab } from '../../hooks/tab';

const ProductsNav = () => {
    const {products, categories, loading} = useContext(ProductsContext);
    const [tabValue] = useTab(0);

    const handleTabChange = (e, newTabValue) => {
        useTab(newTabValue);
    }

    return (
        <div className="products">
            <AppBar position="static">
                <Tabs value={tabValue} onChange={ handleTabChange }>
                    {
                        Array.from(categories).map(category => (
                            !category.unlisted && (<Tab label={category.title} key={category.id}/>)
                        ))
                    }
                </Tabs>
            </AppBar>

        </div>
    ); 
};

export default ProductsNav;

I know it does this with child functions in the docs, but I'm trying to not just copy and paste and do it in my own way.

Here is my custom useTab hook:

import {useState, useEffect} from 'react';

export const useTab = (selectedTab) => {
    const [tabValue, setTabValue] = useState(0);
    useEffect(() => {
        setTabValue(selectedTab);
    }, []);
    return [tabValue];
}

I'm of course getting an error I can't use a hook inside of a function, but I'm confused how else to do this.

How can I change tabValue from useTabs?

jered · Accepted Answer · 2019-09-09 23:10:09Z

0

The error is probably here:

const handleTabChange = (e, newTabValue) => {
    useTab(newTabValue);
}

You're violating one of the primary Rules of Hooks:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function.

The reason for this rule is a bit complex but it basically boils down to the idea that hooks should only be called at the top level of a React functional component because they must be guaranteed to run every time the component function is run.

Hence why you're getting an error "I can't use a hook inside of a function"...

At any rate, it is unclear why you are using a custom hook with a useEffect() here. That seems completely unnecessary - a regular useEffect() hook inside of your nav component should more than suffice:

const ProductsNav = () => {
    const {products, categories, loading} = useContext(ProductsContext);
    const [tabValue, setTabValue] = useState(0);

    const handleTabChange = (e, newTabValue) => {
        setTabValue(newTabValue);
    }

    return (
        <div className="products">
            <AppBar position="static">
                <Tabs value={tabValue} onChange={ handleTabChange }>
                    {
                        Array.from(categories).map(category => (
                            !category.unlisted && (<Tab label={category.title} key={category.id}/>)
                        ))
                    }
                </Tabs>
            </AppBar>

        </div>
    ); 
};

answered Sep 9, 2019 at 23:10

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kinx Over a year ago

Hi I'm using a custom hook so I can use TabPane in another component....

jered Over a year ago

@kinx In that case you should simply move your tabValue state up a few levels in your component hierarchy so that you can make it available (pass it down as props) to multiple components. This concept is called "lifting up state" and understanding it is critical to how you manage state in your React app. It has nothing to do with hooks. reactjs.org/docs/lifting-state-up.html

Bhagyesh · Accepted Answer · 2024-10-22 03:16:25Z

-1

const [data, setData] = useState(initialValue);

function handleClick() {
  setData(newValue); // update the state
}

<button onClick={handleClick}>Click Me</button>

edited Oct 22, 2024 at 3:16

Bhagyesh

7001 gold badge11 silver badges37 bronze badges

answered Oct 21, 2024 at 6:08

Deepak Gautam

11 bronze badge

1 Comment

Mark Rotteveel Over a year ago

Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Collectives™ on Stack Overflow

How to set data from a react hook inside of a function or event?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related