CODEWITHSUNDEEP
javascriptreactjs
olayemii
olayemii

Reputation: 600

Getting props in a sub function when using a HOC

I am trying to make a HOC that handles some functionalities in react and i am creating my HOC this wat 

import React, { useState } from "react";

export default function withFormControl(WrappedComponent) {
  return props => {
    const onChangeField = e =>
      setFields({ ...fields, [e.target.id]: e.target.value });

    const [fields, setFields] = useState({});

    const submitForm = e => {
      console.log(fields);
      e.preventDefault();
    };

    return (
      <WrappedComponent
        onChangeField={onChangeField}
        submitForm={submitForm}
        fields={fields}
        {...props}
      />
    );
  };
}

And i am using it in my component like this:

    import React, { useState } from "react";
    import { Col, Form, FormGroup, Label, Input, Button } from "reactstrap";

    import { Typo, Ico, AuthLayout } from "../../../components";

    import "./Applicant.css";
    import FormInput from "../../../components/common/FormInput/FormInput";
    import withFormControl from "../../../hocs/WithFormControl";

    function Applicant(props) {
      console.log(props); // I get the props here 
      const subFunction = props => {
        console.log(props); // returns undefined
      }
    }
    export default withFormControl(Applicant);

I cant get the props in the inner function, any reason for this behavior?

Upvotes: 0

Views: 134

Answers (1)

Pavel Kratochvil
Pavel Kratochvil

Reputation: 481

Problem is that param of function called subFunction is shadowing variable from outer scope and then subFunction is called without any params.

Upvotes: 1

Related Questions