Material-UI to new hook Reactjs? - reactjs

Question

All the new examples of how to make reactJS sites are showing examples like
const NavBar = (params) => {
return(
<div>
text
</div>
)
}
export default NavBar;
However material-UI seems to show the following, which is making it really hard for me to understand, how to get the tabs working with the new code format above. How does a constructor work in the new format?
import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};
export default class TabsExampleControlled extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'a',
};
}
handleChange = (value) => {
this.setState({
value: value,
});
};
render() {
return (
<Tabs
value={this.state.value}
onChange={this.handleChange}
>
<Tab label="Tab A" value="a">
<div>
<h2 style={styles.headline}>Controllable Tab A</h2>
<p>
Tabs are also controllable if you want to programmatically pass them their values.
This allows for more functionality in Tabs such as not
having any Tab selected or assigning them different values.
</p>
</div>
</Tab>
<Tab label="Tab B" value="b">
<div>
<h2 style={styles.headline}>Controllable Tab B</h2>
<p>
This is another example of a controllable tab. Remember, if you
use controllable Tabs, you need to give all of your tabs values or else
you wont be able to select them.
</p>
</div>
</Tab>
</Tabs>
);
}
}
EDIT
I found what I needed to do
By using useState I could check what page the use is on and make sure it was the first time the user has entered the site then set a const which then allows me to run another const afterwards to set the tab that needs to be active.
const firstTime = false;
React.useState(() => {
if(!firstTime && window.location.pathname === "/two"){
//console.log('mounted or updated')
firstTime = 1;
}
}
);
const [value, setValue] = React.useState(firstTime);

Answer 1

From MDN:
"The constructor method is a special method for creating and initializing an object created within a class."
The material-ui example is a class component and the new example is a function component. Function components do not use constructors.
Until recently, when the Hooks API was introduced, if a component needed to use State, it had to be a class component, but with Hooks, state can now be manipulated inside of function components. I suggest you read up on this. Here's a good starter:
https://overreacted.io/how-are-function-components-different-from-classes/
Below is a refactored version using a function component and hooks:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab } from "#material-ui/core";
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400
}
};
const TabsExampleControlled = props => {
const [value, setValue] = useState("a");
return (
<Tabs value={value} onChange={(event, value) => setValue(value)}>
<Tab label="Tab A" value="a">
<div>
<h2 style={styles.headline}>Controllable Tab A</h2>
<p>
Tabs are also controllable if you want to programmatically pass them
their values. This allows for more functionality in Tabs such as not
having any Tab selected or assigning them different values.
</p>
</div>
</Tab>
<Tab label="Tab B" value="b">
<div>
<h2 style={styles.headline}>Controllable Tab B</h2>
<p>
This is another example of a controllable tab. Remember, if you use
controllable Tabs, you need to give all of your tabs values or else
you wont be able to select them.
</p>
</div>
</Tab>
</Tabs>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<TabsExampleControlled />, rootElement);
check it out here https://codesandbox.io/s/material-ui-tabs-hooks-wkyzq