React.js: set default value to prop

Question

Guys, I made this component that creates a simple button:

class AppButton extends Component { setOnClick() { if(!this.props.onClick && 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 ( <button onClick={this.props.onClick}>{this.props.message}</button> ) } } 

And I have another component that displays 2 buttons:

 class App extends Component { render() { return ( <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" /> <AppButton /> ); } } 

But I get the following error:

TypeError: cannot define property "message": object is not extensible

On the line that says:

  this.props.message="Hello" 

in the setMessage method of the AppButton class.

Edit 1

I generated a response application using npm and my package.json has the following content

 { "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" } } 

Answer 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 parameters will be used to ensure that this.props.name will be set if it was not specified by the parent component. Type checking propTypes occurs after defaultProps are enabled, so typechecking also applies to defaultProps files.

Change for clarity . In this case, you will not need setMessage .

Answer 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 message will replace prop by default.

Answer 3

Are you using React v.14 or higher? props are now frozen and cannot be changed. You can use React.cloneElement instead

Answer 4

You cannot configure the details, you must use this state.

If you need to change a value, it must be kept in state due to static details.

You should do it as follows:

 this.setState({message: 'your message'}); 

And in the rendering method, use it like:

 {this.state.message} 

As a recommendation, you should also initialize the state with this value in the constructor:

 constructor(props){ super(props); this.state = { message: '' } } 

The same thing will happen with setOnClick

You will find a good explanation here .

Answer 5

You will see a good explanation here .