In ReactJs when use onclick fuction with setState, how to pass parameters?

Question

In my case, im using few buttons and when a button is clicked, there should be a change in view. for the view i am using same panel for each button click and the change will be apply on heading of the panel( company name). To change the name I am sending parameter with Onclick method like below.

class View extends Component {
    constructor(props){
        super(props)
        this.state ={
            message: <Content name="ABC"/>
        }
    }

    changeStateMSG(prevStep,props){
        this.setState({
            message:<Content name={this.props.name}/>
        })
    }
    render() { 
        return ( 
            <div className="row">
            <div className="mr-sm-3">
            <div style={{ width: '18rem', marginTop: '20px' }}>

              <Button onClick={() => this.changeStateMSG(this.props.name="XYZ")} variant="secondary" size="lg" block >
                    Omobio
              </Button>

              <div className="mr-sm-9">
                  <p>{this.state.message}</p>
              </div>

.... when i pass parameter like above (this.props.name="XYZ") i am getting error as "TypeError: Cannot add property name, object is not extensible". Hope some can help me

Answer 1

You cannot change the props as the react docs says

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props

You should just pass "XYZ" . or you can pass a object with this.props with name:'XYZ' using spread operator.

onClick={() => this.changeStateMSG({...this.props,name:"XYZ"})}

And change your function which this

changeStateMSG(prevStep){
        this.setState({
            message:<Content name={prevState.name}/>
        })
    }

If you don't want all the props object inside your function then just pass "XYZ" .

onClick={() => this.changeStateMSG("XYZ")}

And change you function to this

changeStateMSG(name){
   this.setState({
            message:<Content name={name}/>
   })
}

Answer 2

this.props is what View receives from its parents. You cannot set a value to it. use instead:

onClick={() => this.changeStateMSG("XYZ")}

And

changeStateMSG(value){
    this.setState({
        message:<Content name={value}/>
    })
}

Answer 3

Have you checked the documentation? I believe the error clearly states that you can not add property to the this.props .

You can pass the arguments just with this statement, like in a normal function execution.

<Button 
  onClick={() => this.changeStateMSG("value_first_argument", "value_ second_argument")}
  variant="secondary"
  size="lg"
  block >
  Omobio
</Button>

And your function definition should look like,

changeStateMSG(prevStep, props){
        this.setState({
            message:<Content name={this.props.name}/>
        })
    }

Answer 4

Why you have to pass the props.name to changeStateMSG function when you can access it from that function? Just simple call that in changeStateMSG and remove parameters you don't use.

changeStateMSG(){
    this.setState({
        message:<Content name={this.props.name}/>
    })
}

...
onClick={this.changeStateMSG}

Answer 5

Problem is function this.changeStateMSG(this.props.name="XYZ"). Did U pass variable prevStep. U pass like this (this.props.name="XYZ") is wrong way. Should edit:

render() { 
     const prevStep = 1;
     return ( 
        <div className="row">
          <div className="mr-sm-3">
            <div style={{ width: '18rem', marginTop: '20px' }}>

              <Button onClick={() => this.changeStateMSG(prevStep, {name:'XYZ'})}  variant="secondary" size="lg" block >
                    Omobio
              </Button>