Child Component is not updating after Parent Component passes it new props

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[] }

try looking into `componentDidUpdate()` , `https://reactjs.org/docs/react-component.html#componentdidupdate` — Ankush Verma, Oct 26 '20 at 19:29
but isnt that for each component itself, like would it know how to if the parent component updated — Sam, Oct 26 '20 at 19:30
could you console.log(event.target.value,event.currentTarget.value)? Inside of `handleChange` — Ankush Verma, Oct 26 '20 at 19:38
type modelObject = { label: string; resultMatch: boolean; resultProbablity: number; }; type ToxicityModelProp = { userSentence: string; modelObjectArray : modelObject[] } — Sam, Oct 26 '20 at 19:54
So the props in the child component are updating but not the state correct? have you look into Memoization? — Ricardo Sanchez, Oct 26 '20 at 20:10
@Sam I did copy and paste your code to a codesandbox project and after removing what I think is Typescript code, your code works, but only the props are getting the data not the state, Naren code does exactly that but He is using props in the child and not the state. If you want the state that is a bit more complicated, [this post](https://stackoverflow.com/questions/39041710/react-js-change-child-components-state-from-parent-component) may give you a bit more insight. Unfortunately the code is a bit old and some of the class component lifecycle methods they mention are deprecated — Ricardo Sanchez, Oct 26 '20 at 20:19
So How should I approach this in the modern way, also shouldn't state get the data from props after being initialised, im guessing in my case here after being initialised it is not being updated. I'm fairly new to React — Sam, Oct 26 '20 at 20:54

Naren · Accepted Answer · 2020-10-26T20:30:30.133

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

edited Oct 26 '20 at 20:30

answered Oct 26 '20 at 19:42

Naren

4,152
3
17
28

However this gives me error with typescript: Type '{ userSentence: { userSentence: string; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'. Property 'userSentence' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>' – Sam Oct 26 '20 at 19:45
Also printing inside the TensorFlowToxicModel does not give me that rather, it gives the initial value passed. – Sam Oct 26 '20 at 19:49
what is `TensorFlowToxicModel `? is it your custom component or any library? – Naren Oct 26 '20 at 19:51
Its a Custom Component that gets data from tensorflowToxicModel which is from a function – Sam Oct 26 '20 at 19:51
Gotcha, Can you show the properties of `ToxicityModelProp `? – Naren Oct 26 '20 at 19:55
I posted the type on the question comments – Sam Oct 26 '20 at 19:56
I don't see it in question, can you check once – Naren Oct 26 '20 at 19:58
1

I have added it to the question – Sam Oct 26 '20 at 19:59
Cool, lemme check – Naren Oct 26 '20 at 20:03
I have made changes on your code. Check out here https://stackblitz.com/edit/react-ts-apuiwv – Naren Oct 26 '20 at 20:12
I Checked it Out it WORKS, THANK YOU SOOOOO MUCHH. It works, I didnt think to define a type for the TensorFlowprop which is seperate from the state. THANK YOU ONCE AGAIN!!! GOD BLESS YA – Sam Oct 26 '20 at 21:02

Child Component is not updating after Parent Component passes it new props

1 Answers1