constructor(props) in functional component react

Question

I have this:

    const AddMembershipPage = (props) => {
  const history = useHistory();


//   constructor(props) = {
//     let ssoDetails = props.blue
//     super(props);
//     var myCnum = ssoDetails.uid;
//     var empType = "part-time";
//     var email = ssoDetails.preferredIdentity;
//     var name = ssoDetails.preferredFirstName + " " + ssoDetails.preferredLastName;

//     this.state = {
//         cnum: myCnum,
//         empType: empType,
//         email: email,
//         name: name,
//         phone: "",
//         siteList: "",
//         status: ""
//     };
//   }
  

  const handleInputChange = (e) =>
    setFields((f) => ({ ...f, [e.target.name]: e.target.value }));

  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AdminNav />
      <div className="App">
      <form>
        <label>Enter your name:
            <input type="text" />
        </label>
    </form>
    </div>
    </div>
  );
}
const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

const mapDispatchToProps = (dispatch, props) => ({
    setNavTabValue: (value) => dispatch(setNavTabValue(value))
});

export default AddMembershipPage;

as you can see, what I am trying to do is use the constructor(props) , and set values into props. I am calling them from:

const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

but when I do the constructor(props) , it shows an error:

constructor(props) {

Missing semicolon.

I am not sure if the constructor props thing is able to be used within functional component, as what I was trying to do was convert this from a class component.how can I fix this, or what can I do differently?

Answer 1

Function components have no constructor. Instead of trying to use the connect HOC and save props into local state ( a React anti-pattern ), you can use the useSelector hook from react-redux and select the state you need and just declare the local variables from the state.

import { useDispatch, useSelector } from 'react-redux';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

const AddMembershipPage = (props) => {
  const dispatch = useDispatch();
  const history = useHistory();
  const classes = useStyles();

  const siteTab = useSelector(state => state.siteTab);
  const ssoDetails = useSelector(state => state.blue);

  ... use ssoDetails locally
  
  ... use dispatch(setNavTabValue(value)) for the action

  const handleInputChange = (e) =>
    setFields(fields => ({
      ...fields,
      [e.target.name]: e.target.value,
    }));

  return (
    <div className={classes.root}>
      <AdminNav />
      <div className="App">
        <form>
          <label>Enter your name:
            <input type="text" />
          </label>
        </form>
      </div>
    </div>
  );
};