How can I ensure React props are of the correct type

Question

I have a component that deals with fairly large datasets, and I've created a Proxy wrapper around array that helps deal with repeated operations, like sort.

I want to ensure that if data (the data prop) is passed into my component as an array, it gets the proxy wrapped round it. In other words, something like this:

constructor(props, ...args) {
  if (props.data && !props.data.isData) {
    props.data = new Proxy(props.data, proxyHandlers);
  }

  super(props, ...args);
}

(and something similar in componentWillReceiveProps).

This doesn't work, because React locks props to make it immutable. What's the correct, React-y way of accomplishing this?

Answer 1

You should use a higher order component to transform the props into what you want.

Something like

const props => {
  if (props.data && !props.data.isData) {
    const newData = new Proxy(props.data, proxyHandlers);
    return <MyOldComponent data={newData} />;
  }
  return null;
}