Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save IndifferentDisdain/b18f61237546f47b038ddd50163db5d7 to your computer and use it in GitHub Desktop.
Save IndifferentDisdain/b18f61237546f47b038ddd50163db5d7 to your computer and use it in GitHub Desktop.
Example generic input component wrapper. if props.value is null, react bitches about it. So I have to ternary to get rid of warning, which feels hackey. Null is a perfectly acceptable value for a string prop that's never been set.
import * as React from 'react';
interface InputGroupProps {
disabled?: boolean;
label: string;
onChange(propName: string, newValue: number | string): any;
propName: string;
type?: string;
value: number | string;
}
export default class InputGroupComponent extends React.Component<InputGroupProps, null> {
static defaultProps = {
disabled: false,
type: 'text'
};
handleFieldChange = (e: any) => {
this.props.onChange(this.props.propName, e.currentTarget.value);
}
render() {
const {
disabled,
label,
propName,
type,
value
} = this.props;
return (
<div className="form-group">
<label htmlFor={propName}>{label}</label>
<input
className="form-control"
type={type}
id={propName}
name={propName}
value={value || ''}
disabled={disabled}
onChange={this.handleFieldChange}
/>
</div>
);
}
}
@IndifferentDisdain
Copy link
Author

Warning if ternary is omitted:

react-dom.js:18371 Warning: value prop on input should not be null. Consider using the empty string to clear the component or undefined for uncontrolled components.
in input (created by InputGroupComponent)
in div (created by InputGroupComponent)
in InputGroupComponent (created by CreateQuoteComponent)
in div (created by CreateQuoteComponent)
in div (created by CreateQuoteComponent)
in div (created by CreateQuoteComponent)
in div (created by CreateQuoteComponent)
in div (created by CreateQuoteComponent)
in CreateQuoteComponent
printWarning @ react-dom.js:18371
warning @ react-dom.js:18395
handleElement @ react-dom.js:7248
onBeforeMountComponent @ react-dom.js:7256
callHook @ react-dom.js:8429
emitEvent @ react-dom.js:8441
onBeforeMountComponent @ react-dom.js:8718
mountComponent @ react-dom.js:11548
mountChildren @ react-dom.js:10442
_createInitialChildren @ react-dom.js:6176
mountComponent @ react-dom.js:5995
mountComponent @ react-dom.js:11551
performInitialMount @ react-dom.js:4832
mountComponent @ react-dom.js:4719
mountComponent @ react-dom.js:11551
mountChildren @ react-dom.js:10442
_createInitialChildren @ react-dom.js:6176
mountComponent @ react-dom.js:5995
mountComponent @ react-dom.js:11551
mountChildren @ react-dom.js:10442
_createInitialChildren @ react-dom.js:6176
mountComponent @ react-dom.js:5995
mountComponent @ react-dom.js:11551
mountChildren @ react-dom.js:10442
_createInitialChildren @ react-dom.js:6176
mountComponent @ react-dom.js:5995
mountComponent @ react-dom.js:11551
mountChildren @ react-dom.js:10442
_createInitialChildren @ react-dom.js:6176
mountComponent @ react-dom.js:5995
mountComponent @ react-dom.js:11551
updateChildren @ react-dom.js:4357
_reconcilerUpdateChildren @ react-dom.js:10412
_updateChildren @ react-dom.js:10516
updateChildren @ react-dom.js:10503
_updateDOMChildren @ react-dom.js:6415
updateComponent @ react-dom.js:6233
receiveComponent @ react-dom.js:6195
receiveComponent @ react-dom.js:11630
_updateRenderedComponent @ react-dom.js:5215
_performComponentUpdate @ react-dom.js:5185
updateComponent @ react-dom.js:5106
performUpdateIfNecessary @ react-dom.js:5022
performUpdateIfNecessary @ react-dom.js:11662
runBatchedUpdates @ react-dom.js:12948
perform @ react-dom.js:14760
perform @ react-dom.js:14760
perform @ react-dom.js:12887
flushBatchedUpdates @ react-dom.js:12970
closeAll @ react-dom.js:14826
perform @ react-dom.js:14773
batchedUpdates @ react-dom.js:8825
batchedUpdates @ react-dom.js:12895
_renderNewRootComponent @ react-dom.js:9987
_renderSubtreeIntoContainer @ react-dom.js:10069
render @ react-dom.js:10090
create @ create.tsx:7
(anonymous) @ create:138
c @ jquery-1.9.1.min.js:3
fireWith @ jquery-1.9.1.min.js:3
ready @ jquery-1.9.1.min.js:3
H @ jquery-1.9.1.min.js:3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment