Component class not rendering - reactjs

Question

I'm having a weird problem with a self-made ReactJS component and I must be doing something fundamentally wrong.
I have a parent component, which periodically receives an array of objects by means of a REST service. The received elements are enumerated and put into a react-bootstrap ListGroup element:
<Row>
<Col sm={2}>
<ListGroup>
{this.state.maps.map((object, index) => {
return <ListGroupItem key={index}
onClick={() => this.setState({ currentMapSelection: object })}>
{object.map_name}
</ListGroupItem>
})}
</ListGroup>
</Col>
<Col sm={10}>
{this.renderMapForm()}
</Col>
</Row>
The display of the ListGroupItems is working fine.
Now I wanted to edit an List element by clicking on it. For code separation I wanted to put the entire edit logic into a separate component (MapLoadForm), which renders some Form elements and means to update and delete.
I put the rendering into a separate function, which conditionally renders the MapLoadForm:
renderMapForm() {
const mapForm = this.state.currentMapSelection;
if (mapForm != undefined) {
return <MapLoadForm map={mapForm}></MapLoadForm>
}
return <div></div>
}
The problem now is, that the MapLoadForm just renders correctly for the very first click. Subsequent clicks to other list items don't change it anymore. I don't see the call the the MapLoadForm constructor anymore.
If I replace the return <MapLoadForm map={mapForm}></MapLoadForm> by return <Button>{mapForm.map_name}</Button>, I see a new button rendered with every new click. The same happens, if I put the entire Form rendering logic into the return statement of the renderMapForm() function. Just the "outsourcing" into a new component doesn't work.
import React from 'react';
...
export class MapLoadForm extends React.Component {
constructor(props) {
super(props);
}
...
render() {
return (
<Form style={{ marginTop: "20px" }} horizontal>
...
</Form>
)
}
}
export default MapLoadForm;
Question now: Should that work or am I on the completely wrong track?
TIA

Answer 1

You are missing one part: Whenever props of any component changes, react re-render that component but re-rendering doesn't mean unmounting and mounting the component. It means same component will be rendered with new props, constructor will not get called again.
Put this console inside render method of MapLoadForm component, you will see new value each time component re-render:
console.log('props', this.props.map)
Solution:
What you are looking for is, componentWillReceiveProps lifecycle method, whenever component received new props, this lifecycle method will get called, do the calculation again with new props values, like this:
componentWillReceiveProps(nextProps){
console.log('new props', nextProps);
}
componentWillReceiveProps
componentWillReceiveProps() is invoked before a mounted component
receives new props. If you need to update the state in response to
prop changes (for example, to reset it), you may compare this.props
and nextProps and perform state transitions using this.setState() in
this method.