父组件向其传递新道具后，子组件不会更新

Question

When I get userInput from onChange() and try to pass that to the child Component It is not updating rather holding on to the initial value. I'm trying to pass the string from input field to child component called Tensor-flow Toxic Model, however the state of TensorFlowToxidModel does not change after it is initially set. So I cant run the moddl.

class TensorFlowToxicModel extends React.Component<{}, ToxicityModelProp> {
  constructor(props: userInput) {
    super(props);
    this.state = {
      modelObjectArray: [],
      userSentence: props.userSentence,
    };
  }      
  componentDidUpdate(){
    console.log("This is from TensorFlowToxicModel Compononent")
    console.log("This is the sentence ", this.state.userSentence )
  }
  renderThePost = () => {
    let output = cleanMlOutput(this.state.userSentence)
    return output
  };
  render() {
    return (
      <div>
        <p>This is a Checker Does this even work</p>
      </div>
    );
  }
}

class InputField extends React.Component<{}, userInput> {
  constructor(prop: inputFromField) {
    super(prop);
    this.state = {
      userSentence: "",
    };
  }
 
  handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
    let userInputData: string = event.currentTarget.value;
    //console.log(event.currentTarget.value);
    
    this.setState({
      userSentence: userInputData,
    }); 
  };

  render() {
    const userSentence = {
      userSentence:this.state.userSentence
    }
    //Instead of updating TensorFlowToxicModel Each time from inside its own compnoent 
    //Call it here each time user types something
    return (
      <div>
        <input id="inputField" onChange={this.handleChange} />
        <h4>{this.state.userSentence}</h4>
        
        <TensorFlowToxicModel {...userSentence}/>
        
      </div>
    );
  }
}

the Types

    type modelObject = { label: string; resultMatch: boolean; resultProbablity: number; }; 
type ToxicityModelProp = { userSentence: string; modelObjectArray : modelObject[] } 

Answer 1

You're misplaced the prop types ToxicityModelProp . It should be on first. Read this docs for information about component props,state types

type ToxicityModelProp = { userSentence: string } 
type ToxicityModelState = { modelObjectArray: [] }


class TensorFlowToxicModel extends React.Component<ToxicityModelProp, ToxicityModelState> {
  constructor(props: userInput) {
    super(props);
    this.state = {
      modelObjectArray: []
    };
  } 
  renderThePost = () => {
    let output = cleanMlOutput(this.props.userSentence)
    return output
  };
  render() {
    return (
      <div>
        <p>Sentence is: { this.props.userSentence }</p>
      </div>
    );
  }
}

I have made some changes on your code and update here . Check it out