defaultProps vs logical OR

Question

I recently started using react and I tend to define default values like this:

class TextInput extends Component {
    render() {
        return (
            <input 
                type="text" 
                name={ this.props.inputName || 'inputName' } 
                style={ this.props.inputStyle || {} } 
                className={ this.props.inputClass || '' } 
            />
        );
     }
}

instead of:

class TextInput extends Component {
    render() {
        return (
            <input 
                type="text" 
                name={ this.props.inputName} 
                style={ this.props.inputStyle} 
                className={ this.props.inputClass} 
            />
        );
     }
}

TextInput.defaultProps = {
    inputName: 'inputName',
    inputStyle: {},
    inputClass: ''
}

What disadvantages does this approach have in contrast to using defaultProps?

Answer 1

What disadvantages does this approach have in contrast to using defaultProps?

In your particular code example; none, because you are only using each prop once. However, imagine larger applications in which a particular prop is used in many places, it would become very tedious to manually have to define a "fallback value" if the value is falsy.

Also imagine if you suddenly decide to change this value to something different; you would then have to go through your entire component and update everywhere where that particular prop is used. That would make it prone to errors and mistakes.

Another issue with your approach is if you actually do want a particular prop to be falsy, such as null or 0. Then your condition would fail and the "fallback value" would be used instead.

---

So basically, using defaultProps makes managing your props a bit easier and more comprehensive and manageable.

By the way, for your reference, the logical expression you use is called a Short-circuit evaluation.