Change background of parent after Match - reactjs

Question

I am very new to react...
I have a parent component that represents the background for my webapp. I use Match from react-router to handle when the user navigates to different routes.
The new route renders the PageView component, which I want to have a different background image. So to do this I set the background image of it's parent by passing a function from the parent to he child's props and then calling it in the child from componentDidMount()
This does not work and gives me Maximum call stack exceeded error
Here is my parent component:
class App extends Component {
constructor () {
super()
this.state = {
backgroundImage: '../public/img/initial.jpg'
}
this.changeBackground = this.changeBackground.bind(this)
}
changeBackground (backgroundImage) {
this.setState({
backgroundImage
})
}
render () {
return (
<BrowserRouter>
<Provider store={store}>
<div className='app' style={{backgroundImage: `url(${this.state.backgroundImage})`}}>
<div className='overlay'>
<Match exactly pattern='/' component={() => <Landing />}
/>
<Match
pattern='/healthcare'
component={(props) => <PageView descriptionText='Healthcare Solutions'
backgroundImage='../public/img/5.png' changeParentBackground={this.changeBackground} {...props} />}
/>
<Match
pattern='/officeofthefuture'
component={(props) => <PageView descriptionText='Office of the Future'
backgroundImage='../public/img/1.png' changeParentBackground={this.changeBackground} {...props} />}
/>
</div>
</div>
</Provider>
</BrowserRouter>
)
}
}
And here is my child component PageView
class PageView extends Component {
componentDidMount () {
const { backgroundImage, changeParentBackground } = this.props
changeParentBackground(backgroundImage)
}
render () {
const { descriptionText } = this.props
console.log(this.props.changeParentBackground)
return (
<div className='outerDiv'>
<LeftDesign show />
<RightDesign descriptionText={descriptionText} />
</div>
)
}
}
RightDesign:
class RightDesign extends Component {
render () {
const { descriptionText } = this.props
return (
<div className='rightDiv'>
<div id='bigCircle'>
<div className='bigCircleTextDiv'>
<h1 className='bigCircleText'>{descriptionText}</h1>
</div>
</div>
</div>
)
}
}
LeftDesign
class LeftDesign extends Component {
constructor (props) {
super(props)
const { show } = this.props
this.state = {show}
}
render () {
return (
<div className='leftDivContainer'>
<div className='leftDiv'>
{this.state.show && <WelcomeMsg />}
</div>
</div>
)
}
}

Answer 1

I commented earlier about this sort of solution.
It uses CSS background images and transitions to switch the image based on what the string of the location's pathname's second item is, which would correspond to the first-level routes of your app.
function getBackground(array) {
switch(array[1]) {
case 'healthcare':
return 'www.foo.com/image/1.jpg';
case 'officeofthefuture':
return 'www.foo.com/image/2.jpg';
default:
return 'www.foo.com/image/default.jpg'
}
}
export default class Parent extends Component {
render() {
let { location } = this.props;
// Split the pathname string into an array of sub-paths
let locationArray = location ? location.pathname.split('/') : [];
// Determine the Background URL
let backgroundUrl = getBackground(locationArray);
// Define the Parent Style
const parentStyle = {
transition: 'all 0.2s ease-out',
backgroundImage: "url('"+backgroundUrl+"')",
backgroundPosition: 'center',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat'
};
return <div style={parentStyle}>
{this.props.children}
</div>
}
}