title: React.js: Set a Default value into a prop
body: <p>Fellows I have made this Component that creates a simple Button:</p>
  
  <pre><code>class AppButton extends Component {
  
    setOnClick() {
      if(!this.props.onClick &amp;&amp; typeof this.props.onClick == 'function') {
        this.props.onClick=function(){ alert("Hello"); }
      }
    }
  
    setMessage() {
      if(!this.props.message){
          this.props.message="Hello"
      }
    }
  
    render(){
      this.setOnClick()
      this.setMessage()
      return (
        &lt;button onClick={this.props.onClick}&gt;{this.props.message}&lt;/button&gt;
      )
    }
  }
  </code></pre>
  
  <p>And I have an another Component that renders 2 Buttons:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
            &lt;AppButton onClick={function(){ alert('Test Alert') } } message="My Button" /&gt;
            &lt;AppButton /&gt;
      );
    }
  }
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <blockquote>
    <p>TypeError: can't define property "message": Object is not extensible</p>
  </blockquote>
  
  <p>On the line that says:</p>
  
  <pre><code>        this.props.message="Hello"
  </code></pre>
  
  <p>in method <code>setMessage</code> of the <code>AppButton</code> class.</p>
  
  <h1>Edit 1</h1>
  
  <p>I generated the react application using <code>npm</code> and me <code>package.json</code> has the following content</p>
  
  <pre><code>{
    "name": "sample",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react": "^15.5.4",
      "react-dom": "^15.5.4"
    },
    "devDependencies": {
      "react-scripts": "1.0.7"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>