react component not rerendering when props change

Question

I'm trying to create a modal that asks users if they're an individual or organization, and then shows a sign up modal specific to that type of user. This is what I have so far:

parent:

this.state = {
   showInd: false,
   showOrg: false,  
};

changeInd = () => {
    this.setState({
       showInd: !this.state.showInd
     });
     this.props.onClose(); //this closes the initial modal
}
//exact same syntax for changeOrg

render(){

   return( 
     <div onClick={this.changeInd}>
          <FontAwesomeIcon icon={faUser} className="fa-7x icon"/> 
          <span>individual</span>
     </div>
     <div onClick={this.changeOrg}>
         <FontAwesomeIcon icon={faUsers} className="fa-7x icon"/>
         <span>organization</span>
    </div>
    <SignUpInd show={this.state.showInd} />
    <SignUpOrg show={this.state.showOrg} />
)}

and the child:

render(){
   if (this.props.show){
   return( 
      <various sign up html>
   )}

}

The parent component is re-rendering when the state changes, but the child component is not, even though the props are changing. I've tried using componentDidUpdate, but that is also never triggered when the props change here.

What could I be doing wrong?

EDIT: So I've realized that if I comment out the line that closes the initial modal with a callback function, the signUpInd modal will render properly. Why can I not do both?

Answer 1

1.At the parent component use a function that changes the state.

state = {
    showInd: false,
    showOrg: false,  
 };

 stateChange = () =>{
   this.setState({showInd:!this.state.showInd})
 }

2.Use an onClick function on the div it will give opposite value of what it is right now and pass it as a props to the next component

      <div onClick={this.stateChange}> //this onClick just flips showInd to the opposite of what it is currently - that's working properly
          
           <span>individual</span>
      </div>
     <SignUpInd show={this.state.showInd} stateChange= {this.stateChange} />

3.At the other end just recieve the props and console log it

        const {show,stateChange} = this.props
        console.log(show);

Answer 2

this works:

import React from "react";
import SignUpInd from "./SignUpInd";
import SignUpOrg from "./SignUpOrg";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showInd: false,
      showOrg: false
    };
  }

  showInd = () => {
    this.setState((state) => ({ showInd: !state.showInd }));
  };

  showOrg = () => {
    this.setState((state) => ({ showOrg: !state.showOrg }));
  };

  render() {
    return (
      <React.Fragment>
        <div onClick={this.showInd}>
          <FontAwesomeIcon icon={faUser} className="fa-7x icon"/>
          <span>individual</span>
        </div>
        <div onClick={this.showOrg}>
          <FontAwesomeIcon icon={faUsers} className="fa-7x icon"/>
          <span>organization</span>
        </div>
        <SignUpInd show={this.state.showInd} />
        <SignUpOrg show={this.state.showOrg} />
      </React.Fragment>
    );
  }
}