Troubleshooting the failure of implementing react hooks useState within a material-ui Tab container

Question

Troubleshooting the failure of implementing react hooks useState within a material-ui Tab container

Recently, I have been experimenting with implementing react-hooks useState in material-ui/tabs component. While I have been successful in using the handleChange function, I am eager to explore and master the use of hooks in this scenario. Interestingly, my useState is functioning well for input fields but not when it comes to handling onChange event for material-ui tabs. Below is a snippet of code from my current setup:

const [value, setValue] = useState(0)

<Tabs
   value={value}
   onChange={(event) => setValue(event.target.value)}
   variant="scrollable"
   scrollButtons="on"
   indicatorColor="primary"
   textColor="primary"
 >
     <Tab label="All" />
         {subjects.map((subject) => (
             <Tab label={subject.subjectName} />
      ))}
 </Tabs>

In an attempt to troubleshoot, I introduced console logging via useEffect which revealed that the onChange was returning undefined.

reactjs tabs material-ui react-hooks

Answer 1

Answer №1

One thing that stands out to me is the

onChange={(event) => setValue(event.target.value)}

should actually be:

onChange={(event, newValue) => setValue(newValue)}

In this scenario, the event represents a click event and the target refers to the specific DOM element that was clicked, which could vary among elements like span or button within the Tab. Unlike traditional input elements, none of the elements within the Tab have a value property, hence Material-UI sends the value separately as an argument to the onChange function.

Below is the relevant code snippet from the Tab component:

  handleChange = event => {
    const { onChange, value, onClick } = this.props;

    if (onChange) {
      onChange(event, value);
    }

    if (onClick) {
      onClick(event);
    }
  };

The correct way to use the onChange function is detailed in the Tabs props documentation: https://material-ui.com/api/tabs/#props

onChange func Callback fired when the value changes. Signature:
function(event: object, value: number) => void

A live example based on your code can be found here:

https://codesandbox.io/s/l5y4yzzlx9?fontsize=14

Answer 2

One thing that stands out to me is the

onChange={(event) => setValue(event.target.value)}

should actually be:

onChange={(event, newValue) => setValue(newValue)}

In this scenario, the event represents a click event and the target refers to the specific DOM element that was clicked, which could vary among elements like span or button within the Tab. Unlike traditional input elements, none of the elements within the Tab have a value property, hence Material-UI sends the value separately as an argument to the onChange function.

Below is the relevant code snippet from the Tab component:

  handleChange = event => {
    const { onChange, value, onClick } = this.props;

    if (onChange) {
      onChange(event, value);
    }

    if (onClick) {
      onClick(event);
    }
  };

The correct way to use the onChange function is detailed in the Tabs props documentation: https://material-ui.com/api/tabs/#props

onChange func Callback fired when the value changes. Signature:
function(event: object, value: number) => void

A live example based on your code can be found here:

https://codesandbox.io/s/l5y4yzzlx9?fontsize=14

Troubleshooting the failure of implementing react hooks useState within a material-ui Tab container

Answer №1

Similar questions

Error in React-router: "Attempting to access property 'transitionTo' which is undefined"

React components are failing to display data as expected

I am attempting to transfer information from one page to another in Next.js, but unfortunately, I am experiencing difficulties in

Insert a JSX element into the body of a webpage using React JSX

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

Running a Custom Tab Component in a React Application

Guide on how to switch a class on the body using React's onClick event

What causes the circular progress bar to disappear when hovering over the MUI React table?

Challenges when it comes to exporting files using Firebase Cloud Functions

"Exploring the process of overloading the CSS for a Material Switch

What are the steps to effectively utilize data retrieved from readFragment using Apollo?

What reasons could lead to useSWR returning undefined even when fallbackData is provided?

Triggering two function calls upon submission and then waiting for the useEffect hook to execute

Trouble with MUI breakpoints interacting with a collapsible drawer

Index.js is dynamically importing a .tsx file post-build, with a specific focus on Windows

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Webstorm showcases files with similar content in a distinct manner

The npm postinstall script will only execute if no packages are currently being installed

Tips for making a horizontal grid layout with three items in each row

The OpenWeather API seems to be experiencing some issues when being used in a React JS application, as the URL is displaying data