React.js: Set a Default value into a prop

Solution 1:

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.

Solution 2:

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.

Solution 3:

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