dimanche 19 novembre 2017

React design suggestion needed for validation inputs HOC vs Composition

I'm using react and redux.

I'm having State less text inputs. which I can use like

<TextInput error={true} /> // Uncontrolled and staelss

So I can use the error/success... props by subscribing them to redux store. and also I want to provide an approach to do validation in local state for some simple cases where keeping that state in redux store will be complicated.

So I thought of two approaches.

Approach 1 HOC withValidation

const SomeInput = props => <TextInput label="Something" />;
const SomeInputWithValidation = withValidation(Input,(input) => {
   //perform validation logic
   return validation result.
  }); // Controlled ans stateful. 

Approach 2 creating another component consuming the stateless, uncontrolled version

class ActiveTextInput extends React.Component { // Controlled and stateful.  

     //Do something with satate.

  render(){

     return <TextInput ...control props with state />;
  }
}

Please help me to choose the best abstraction. Thanks.

Aucun commentaire:

Enregistrer un commentaire