Why don't props work when rendered into a single React state?

Question

JavaScript

from the parent I pass the method and the state, which are tied to each other. (click on the button with the method, it sets the state)
If you do everything separately, it works fine

render() {
return (
    <div>
           
                            {this.state.subSectionCulturalSupport}
                            {this.props.PSSubSectionCulturalSupport}
                            
                            {this.state.subSectionFinancialSupport}
                            {this.props.PSSubSectionFinancialSupport}
                            
                            {this.state.subSectionCaseConference}
                            {this.props.PSSubSectionCaseConference}
                            
                            {this.state.subSectionDischargePlRef}
                            {this.props.PSSubSectionDischargePlRef}
                            
                            {this.state.subSectionCoordinateTravel}
                            {this.props.PSSubSectionCoordinateTravel}
                            
                            {this.state.subSectionPSDAMA}
                            {this.props.PSSubSectionPSDAMA}
    </div>

I want to display only relevant props and states, but when I try to assign all this to one state, the method stops working with props

componentWillMount(){
        
        if(this.props.chartName =='Patient Services') {

            this.setState({
                subSection: <div>
                    <Button block onClick={this.props.ConvertPDFSubReportCulturalSupport}>Add Cultural Support</Button>
                    {this.props.PSSubSectionCulturalSupport}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportFinancialSupport}>Add FinancialSupport</Button>
                    {this.props.PSSubSectionFinancialSupport}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportPSDAMA}>Add PSDAMA</Button>
                    {this.props.PSSubSectionPSDAMA}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportCaseConference}>Add Case Conference</Button>
                    {this.props.PSSubSectionCaseConference}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportDischargePlRef}>Add Discharge Planning/Referrals</Button>
                    {this.props.PSSubSectionDischargePlRef}
                    
                    <Button block onClick={this.props.ConvertPDFSubReportCoordinateTravel}>Add Coordinate Patient Travel</Button>
                    {this.props.PSSubSectionCoordinateTravel}
                </div>
            })
        }
    }

render() {
return (
    <div>
           //В этот стейт пытаюсь все задать, кнопки появляются, методы выполняются, но элементы из props перестали выводиться.
           {this.state.subSection}...

What's my mistake?

Answer 1

componentWillMount only runs once.
To respond to property changes, you need to add the same code to componentWillReceiveProps.

Answer 2

It's possible that this doesn't point where you expect it to. Try to do at the very beginning componentWillMount()
var _self = this, and inside the divs instead of this.props write _self.props
UPD. In general, React uses other methods in order to display this or that html code under a certain condition.