Why is this.prop not updating? - reactjs

Question

I have a parent component, that dynamically creates child components, and works great. But as part of that child component, I'm trying to open a modal with a button click, yet the button doesn't work.
To me it seems like that the this.props.lgShow isn't getting the state change. How do I make sure of that?
Here's my parent component:
import React, { Component, Fragment } from 'react';
import Button from 'react-bootstrap/Button';
import Policy from './Policy/Policy';
import PolicyButton from './PolicyButton/PolicyButton';
class Handbook extends Component {
constructor(props){
super(props);
this.state = {
clients: [],
policies: [],
usedPolicies: [],
client: 'Choose Client',
logo: '',
color1: '#000',
color2: '#fff',
lgShow: 'false' // show modal toggle
};
this.modalOpen = this.modalOpen.bind(this);
this.modalClose = this.modalClose.bind(this);
this.modalSave = this.modalSave.bind(this);
}
componentDidMount() {
fetch('/api/themes/all')
.then(res => res.json())
.then((result) => {
this.setState({ clients: result });
console.log(result);
})
.then(
fetch(`/api/policy/all`)
.then(res => res.json())
.then((result) => {
this.setState({ policies: result });
console.log(result);
})
);
}
handleDeletePolicy = policyId => {
console.log(`Button clicked: ` + policyId);
for (var i = 0; i < this.state.usedPolicies.length; i++) {
if (this.state.usedPolicies[i].id === policyId) {
const policies = this.state.policies;
const usedPolicies = this.state.usedPolicies;
policies.push(usedPolicies[i]);
this.setState({ policies: policies });
usedPolicies.splice(i, 1);
this.setState({ usedPolicies: usedPolicies });
console.log(this.state.policies);
console.log(this.state.usedPolicies);
}
}
}
modalOpen = policyId => {
console.log("Open Modal" + policyId);
this.setState({lgShow: true});
}
modalClose = policyId => {
console.log("Close Modal" + policyId);
this.setState({ lgShow: false });
}
modalSave = policyId => {
console.log("Save Modal" + policyId);
this.setState({ lgShow: false });
}
render(){
return(
<Fragment>
<div className='policies'>
{this.state.usedPolicies.map(policy => (
<Policy key={policy.id} id={policy.id} policy={policy.policy} contents={policy.contents} color1={this.state.color1} color2={this.state.color2} onDeletePolicy={this.handleDeletePolicy} onOpen={this.modalOpen} onClose={this.modalClose} onSave={this.modalSave} />
))}
</div>
</Fragment>
);
}
}
export default Handbook;
And here is my child component.. I believe the problem must be here somewhere.
import React, { Component } from 'react';
import styled from 'styled-components';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import TinyEditor from '../../TinyEditor/TinyEditor';
const Div = styled.div `
background-color: white;
color: black;
margin-top: 2em;
.edit{
text-align: right;
svg{
font-size: 1em;
margin: 0.25em;
}
}
.policy{
border: 1px solid black;
padding: 2em;
}
h1{
margin-bottom: 1em;
text-align: left;
padding: .25em;
}
`
class Policy extends Component {
constructor(props){
super(props);
this.state = {
id: this.props.id,
policy: this.props.policy,
contents: this.props.contents,
color1: this.props.color1,
color2: this.props.color2,
lgShow: this.props.lgShow
}
}
render(){
return(
<Div className="container">
<div className="edit">
<Button variant="light" onClick={() => this.props.onOpen(this.props.id)}><i className="far fa-edit"></i></Button>
<Button variant="light" onClick={() => this.props.onDeletePolicy(this.props.id)}><i className="far fa-trash-alt"></i></Button>
</div>
<div className="policy">
<h1 style={{ background: this.props.color1, color: this.props.color2 }}>{this.props.policy}</h1>
<div dangerouslySetInnerHTML={{ __html: this.props.contents }}></div>
</div>
<Modal
size="lg"
show={this.props.lgShow}
onHide={this.props.onClose}
aria-labelledby="modal-title-lg"
>
<Modal.Header closeButton>
<Modal.Title id="modal-title-lg">
Large Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>
<TinyEditor />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.props.onClose}>
Close
</Button>
<Button variant="primary" onClick={this.props.onSave}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</Div>
)
}
}
export default Policy;

Answer 1

I do not see 'lgShow' property in the 'Policy' tag.
<Policy
key={policy.id}
id={policy.id}
policy={policy.policy}
contents={policy.contents}
color1={this.state.color1}
color2={this.state.color2}
onDeletePolicy={this.handleDeletePolicy}
onOpen={this.modalOpen}
onClose={this.modalClose}
onSave={this.modalSave}
/>
In the child element 'Policy' you wrote:
this.state = {
id: this.props.id,
policy: this.props.policy,
contents: this.props.contents,
color1: this.props.color1,
color2: this.props.color2,
lgShow: this.props.lgShow // This one is not in parent element
}