Reputation: 1
I want to pass the contextHOC constant to the HOC component but I got a contextHOC is not defined error message so How to pass data named contextHOC from Component named MileageExpenseFormikSteps to HOC Component withHOC
here is the HOC component
import { render } from "react-dom";
import React from 'react';
const withHOC = Component => {
class Hoc extends React.Component
{
constructor(props)
{
super(props);
const s = this.props.test;
}
render(){
console.log("sss",this.props.test)
return <Component/>
}
}
//console.log("sss111",this.props.test)
return Hoc;
}
export default withHOC;
and here is my component which contains the value of contextHOC
import withHOC from './hoc';
const test= {};
const MileageExpenseFormikSteps = ({userToken, setFieldValue}) => {
const contextHOC = useFormikContext();
console.log("contextHOC",contextHOC)
return (
<FormikConsumer>
{({values}) => {
const steps = values.expense_detail.mileage_expense_steps
return (
<div className={'col'}>
<SingleCardFullPageWidth width={12}
title={StepsCardTitle(values.expense_detail.distance, values.ht_amount,
steps.length)}
>
<Fld name={"expense_detail.return_trip"}
label={I18n.t("views.mileage_expense.return_trip")}
classes={"horizontal-switch medium-top-margin"}
tooltipMessage={ steps.length > 1 ?
I18n.t('activerecord.errors.models.mileage_expense.return_trip_not_allowed') :
null }
tooltipIcon={ "fa-exclamation-circle" }
tooltipColor={ "orange" }
>
<SwitchField isDisabled={steps.length > 1 ? true : false}/>
</Fld>
<MileageExpenseSteps
steps={steps}
userToken={userToken}
setFieldValue={setFieldValue}
isReturnTrip={values.expense_detail.return_trip}
/>
</SingleCardFullPageWidth>
</div>
)
}}
</FormikConsumer>
)
}
export default withProps({test:contextHOC}) (withHOC(MileageExpenseFormikSteps))
Upvotes: 0
Views: 93