With React, how can I reuse the setState function instead of copying and pasting?

Question

I have an app I'm making. The idea is that you set the state to different things based off what you click. In this case, the state is the image src variable. I currently have this...

   merryWeather = () => {
      this.setState({
         imgPath: merrys
      })
   }

   maxJPegasus = () => {
      this.setState({
         imgPath: pega
      })
   }

   betterCallLamar = () => {
      this.setState({
         imgPath: lamars
      })
   }

   betterCallLester = () => {
      this.setState({
         imgPath: lesters
      })
   }

And some other state setting functions. How can I write these as one function, and call that same function over and over?

Answer 1

Create a single function and pass the parameter to be set as imgPath .

setImgPath = (imgPath) => {
  this.setState({imgPath});
}

Answer 2

You can create an updateState function that accepts a name and value or a function that updates imgPath for you.

updateState = (name, value) => {
    this.setState({
        [name]: value
    });
}
merryWeahter = () => {
    this.updateState('imgPath', merrys);
}
maxJPegasus = () => {
    this.updateState('imgPath', pega);
}

OR

updateImgPath = value => {
    this.setState({
        imgPath: value
    });
}
merryWeahter = () => {
    this.updateImgPath(merrys);
}
maxJPegasus = () => {
    this.updateImgPath(pega);
}