OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter kinx
  • Start date Start date
K

kinx

Guest
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.

Code:
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:

Code:
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?

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

<p>I'm using <a href="https://material-ui.com/components/tabs/" rel="nofollow noreferrer">Material UI's Tabs</a> and need to use useTab, a custom hook to change the tab id.</p>

<pre><code>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;
</code></pre>

<p>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.</p>

<p>Here is my custom useTab hook:</p>

<pre><code>import {useState, useEffect} from 'react';

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

<p>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. </p>

<p>How can I change tabValue from useTabs? </p>
 

Latest posts

Top