ReactJS: How can I have a more modular use of types and forms for objects?

Question

I like to explicitly state all my support types for each class.

React.createClass({ propTypes: { optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, ... 

This is from reading reusable components: https://facebook.imtqy.com/react/docs/reusable-components.html

However, what if I have a very generic object that I use in many classes? For instance:

 var MemoryForm = React.createClass({ propTypes: { memory: React.PropTypes.shape({ memoryID: React.PropTypes.number, content: React.PropTypes.string, date: React.PropTypes.object, dateStr: React.PropTypes.string, note: React.PropTypes.string }).isRequired, ... var MemoriesArea = React.createClass({ propTypes: { // The initial memory to fill the memory form with. formMemory: React.PropTypes.shape({ // <== shape used again memoryID: React.PropTypes.number, content: React.PropTypes.string, date: React.PropTypes.object, dateStr: React.PropTypes.string, note: React.PropTypes.string }).isRequired, // ... var Playground = React.createClass({ getInitialState: function() { var initVars = { // The initial memory to fill the memory form with. formMemory: { // <== shape is used again. memoryID: 0, content: "", date: null, dateStr: "", note: "" } }; return initVars; } //... 

Here I often use the "memory" form in prop types for various classes, as well as in some initializations. How to make it drier - i.e. Less code duplication, so changing the shape of this object will be more convenient in the future?

Answer 1

I had the same problem and I just moved the values ​​to a separate ES6 module. In your example:

 // File lib/PropTypeValues.js import { PropTypes } from 'react'; export let MemoryPropTypes = PropTypes.shape({ memoryID: PropTypes.number, content: PropTypes.string, date: PropTypes.object, dateStr: PropTypes.string, note: PropTypes.string }).isRequired 

Then in your client code:

 // MemoryForm.jsx import { MemoryPropTypes } from './lib/PropTypeValues' import React from 'react'; class MemoryForm extends React.Component { static propTypes: { memory: MemoryPropTypes, // ... }; } 

Hope this helps.

Answer 2

I would make a small module demonstrating this functionality. In the CommonJS world, it will look something like this:

 let React = require('react'); module.exports = { propTypes() { return React.PropTypes.shape({ memoryID: React.PropTypes.number, content: React.PropTypes.string, date: React.PropTypes.object, dateStr: React.PropTypes.string, note: React.PropTypes.string }).isRequired; }, initialValues() { return { memoryID: 0, content: "", date: null, dateStr: "", note: "" }; } } 

Then you will use this in such components:

 let memoryUtils = require('./memory-utils'); let MyComponent = React.createClass({ propTypes: memoryUtils.propTypes(), render() { ... } }); 

and

 let memoryUtils = require('./memory-utils'); let MyComponent = React.createClass({ getInitialState() { return memoryUtils.initialValues(); }, render() { ... } });