React.js: Set a Default value into a prop

I believe that defaultProps should do what you need:

import PropTypes from 'prop-types';

class AppButton extends Component {
 render(){
    return (
      <button onClick={this.props.onClick}>{this.props.message}</button>
    )
  }
};

AppButton.propTypes = {
  message: PropTypes.string,
  onClick: PropTypes.func
};

AppButton.defaultProps = {
  message: 'Hello',
  onClick: function(){ alert("Hello"); }
};

From the docs:

The defaultProps will be used to ensure that this.props.name will have a value if it was not specified by the parent component. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

Edit for clarity: There should be no need for you setMessage in this instance.


return (
      <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
);

This will check the value of prop and if it is undefined or null, the default message will replace the prop.


Are you using React v.14 or above? the props object is now frozen and cant be changed. You can use React.cloneElement instead