How to update <img/> on prop change - reactjs

Question

Hi I am retrieving data from a Logitech Media server, title, artist, song etc and would like to know how to update the image returned by this server when the title of the song changes.
I have created a component that happily receives, displays, and updates all the relevant audio subcontrols , but I cannot get the song jpg to update on song title name change. The src of the image is set in state( and is the url of logitech media server needed to refreash the jpg)
The song title is happily updated when sent to the audioToolBar component
The title is defined in the switch statement and I thought by updating placing the songtitle in state and updating it when it changes would work, but whatever i try i get an error stating max depth of calls to setstate exceeded.
The Abbrievated (non functioning)code of component listed below
I am a newbie with react and js so any help greatly appreciated.
import React, { Component } from "react";
import { withStyles } from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import SwitchedComponent from "./switchedComponent";
import AudioToolBar from "./audioToolBar";
class AudioLightandHeat extends Component {
state = {imgSrc :"http://192.168.1.1:9000/music/current/cover.jpg?player=Bathroom"};
getControls = ()=>{
for (let index = 0; index < this.audioControls.length; index++) {
const element = this.audioControls[index];
switch (element.name) {
case "Title":
this.titleCont = element
let songAndArtist = (this.titleCont.statesValue.textAndIcon).split("/")
this.song = songAndArtist[0]
this.setState({songTitle:this.song})
break;
case "Volume":
this.volumeCont = element;
break;
case "Mode":
this.modeCont = element;
break;
case "Track":
this.trackCont = element;
break;
case "Play Pause":
this.playCont = element;
break;
}
}
}
}
}
}
}
}
render() {
const { classes, theme } = this.props;
this.getControls()
return (
<>
{this.hasAudioControl ? (
<img src = {this.state.imgSrc} width={300} height={300} />
) : null}
</>
);
}
}
export default withStyles(styles, { withTheme: true })(AudioLightandHeat);
ok so I have refactored the entire component to look like this
import React, { Component } from "react"
import { withStyles } from "#material-ui/core/styles"
import Grid from "#material-ui/core/Grid"
import AudioToolBar from "./audioToolBar"
const styles = theme => ({
grid: {
flexGrow: 1,
},
});
class AudioLightandHeat extends Component {
render() {
const { classes, theme } = this.props;
return (
<>
{console.log(" in render")}
{this.props.componentProps ? (
<Grid container className={classes.grid}>
<img src = "http://192.168.1.1:9000/music/current/cover.jpg?player=Bathroom" width={300} height={300} />
</Grid>
) :null}
{this.props.componentProps ? (
<AudioToolBar title = {this.props.componentProps.audioLightHeatControls.titleCont}
volume={this.props.componentProps.audioLightHeatControls.volumeCont}
mode={this.props.componentProps.audioLightHeatControls.modeCont}
track={this.props.componentProps.audioLightHeatControls.trackCont}
playpause={this.props.componentProps.audioLightHeatControls.playCont}
reqStateChange={this.props.componentProps.reqStateChange}
/>
) :null}
</>
)
}
}
export default withStyles(styles, { withTheme: true })(AudioLightandHeat);
The title , wolume, mode, track all update correctly when the props are updated, but the img does. I suspect this is because the src url does not change and hence the browser does not ask for it again despite there being a new image on the server at the same addresss.
How can i force React to call for the image when in render.
I have tried adding date.now to end of the url i.e src = "http://192.168.1.1:9000/music/current/cover.jpg?player=Bathroom" + new Date().getTime() but then get a 404 error from the server, I also added the following to index.html
<meta http-equiv="cache-control" content = "max-age=0">
<meta http-equiv="cache-control" content = "no-cache">
<meta http-equiv="pragma" content = "node_modules">
but this does not work either.
Any help greatly appreciated.

Answer 1

More General Advice about your react component
All the state of your react components should be in the component state. (this.song, this.titleCont etc. are currently not part of the component state, but assigned to the instance of the component)
This this.setState({ songTitle: this.song }) seems better, but it is usually not a good idea to have calls to setState in a function which is called in the render method. (It is very easy to produce infinite loops like this...)
The specific reason why it is only rendered once
NOTE: I am guessing here. You should really refactor your component first. Also you should probably read into the react component life cycle a bit, before you continue. Maybe this can help you.
Currently your render method will be called once during the initial render. During this initial render this.getControls() will be called once, but will probably not trigger the "Title" case.
After this initial render the props and state don't seem to change and therefore the component wont rerender. Therefore the render method and this.getControls() are not called again and the setState call wont be done.