How to mask properties when using HOC's in React? - reactjs

Question

My question, while related to a specific use case, is more about a general concept.
I use a library Informed for form management and it uses higher order components to allow creating custom fields. Here's the HOC:
import React from 'react';
import Field from '../components/Field';
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
const asField = Component => {
const displayName = getDisplayName(Component);
Component.displayName = 'Wrapper';
const AsField = props => <Field component={Component} {...props} />;
AsField.displayName = displayName;
return AsField;
};
export default asField;
I took this from the official repo. So here's how it's supposed to be used:
// Definition
const CustomInput = asField(
({
fieldState: {value},
fieldApi: {setTouched, setValue},
forwardedRef
}) =>
<input onFocus={() => setTouched()} onChange={e => setValue(e.target.value)}
ref={forwardedRef} value={!value && value !== 0 ? '' : value} />
)
// Usage
<CustomInput field="firstName" />
So in my case, first, I'm not a big fan of higher order components, and I don't like specifying the field name using field prop, I prefer name. So with that in mind I create a component that duplicates the functionality of the asField HOC and uses name instead of field:
//#flow
import React from 'react'
import {asField} from 'informed'
export const Field = ({children, name, ...props}) => React.createElement(
asField(children),
{
field: name,
...props
}
)
Then I use it like this:
// Definition
const CustomInput = ({name}) =>
<Field field={name}>
{({
fieldState: {value},
fieldApi: {setTouched, setValue},
forwardedRef
}) =>
<input onFocus={() => setTouched()} onChange={e => setValue(e.target.value)}
ref={forwardedRef} value={!value && value !== 0 ? '' : value} />
}
</Field>
// Usage
<CustomInput name="firstName" />
This works, but interestingly, it causes something in the state to endlessly update something in the state which blocks the whole UI. The documented way works just fine.
I cannot find anything in my component. The component that asField returns is the one that accepts the field prop, it gets it through my function along with other props.
What could be the issue here? Did I miss something or is there a problem with the core concept?

Answer 1

you are using the wrong syntax for createElement
instead of createElement({}) use createElement(comp, props, children)
I have made a working code for your case
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class HoC extends React.Component {
constructor(props) {
super(props);
}
render() {
return <App fromHOC={this.props.fromHOC} field={this.props.field} />;
}
}
const Field = ({ children, name, ...props }) =>
React.createElement(HoC, { field: name, ...props }, children);
export default function App(props) {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div>
I am getting props {props.fromHOC} <div />
<div> The name is {props.field} </div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Field name="New name" fromHOC="YES!!!" />, rootElement);
Full code here
For your updated question, I have a probable solution; see it it works
import React from "react";
import ReactDOM from "react-dom";
import { Text, Form } from "informed";
const Func = props => {
console.log(props);
return (
<Form id="simple-form">
<label htmlFor="name-field">First name:</label>
{/*(<Text field="name" id="name-field" /> */}
<Text {...props} />
<button type="submit">Submit</button>
</Form>
);
};
const HOC = ({ children, name, ...props }) => {
return React.createElement(Func, { ...props, field: name }, children);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<HOC name="name" id="name-field" />, rootElement);