infernojs pass data to parent component

I am stuck in my simple infernojs v1.2.2 app to pass data to parent component, this issue might be linked to the typescript because i got some error for typescript which are not (It has issuewith recognizing props from parent component).

I try to give a callback to my child component to call it later but I have a bad context. The work around I did make me not even triggering the onInput.

Here is my parent component

import { linkEvent } from 'inferno';
import Component from 'inferno-component';


import Weight from './weight';

export class RatioAlcohol extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
         this.state = { weight: 65 };
    }
    setChangeWeight(instance, event) {
        instance.setState({ weight: event.target.value });
    }
    render(props){
        return (
                <div className="ratio-alcohol">
                    <Weight valueChanged={ linkEvent(this, this.setChangeWeight) } weight={ this.state.weight } />
                </div>
        );
    }
}

and there my child component:

import { linkEvent } from 'inferno';
import Component from 'inferno-component';

export default class Weight extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: props.weight};
    }
    handleChangeWeight(instance, event) {
        instance.valueChanged.event();
    }
    render(props){
        return (
                <div className="weight">
                    <label for="WeightInput">What is your weight(Kg)?</label>
                    <input id="WeightInput" name="weight" type="number" value={ props.weight } onInput={ linkEvent(props, this.handleChangeWeight) } />
                </div>
        );
    }
}

I did not find an example of parent / child component interaction in the inferno documentation and I have no experience in React, I feel like I could get the answer from React app but did not get it for the moment.

I used the inferno-typescript-example as base for my project, I don't know if it matters with that issue.

so the handleChangeWeight function signature in Weight has 1st params as instance, it's actually your component's props. It should be something like

export default class Weight extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: props.weight};
    }
    handleChangeWeight(props, event) {
        props.valueChanged(event);
    }
    render(props){
        return (
                <div className="weight">
                    <label for="WeightInput">What is your weight(Kg)?</label>
                    <input id="WeightInput" name="weight" type="number" value={ props.weight } onInput={ linkEvent(props, this.handleChangeWeight) } />
                </div>
        );
    }
}

and in RatioAlcohol you don't have to link event, rather if you need access to instance, you gotta bind your handler

export class RatioAlcohol extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: 65 };
        this.setChangeWeight = this.setChangeWeight.bind(this)
    }
    setChangeWeight(event) {
        this.setState({ weight: event.target.value });
    }
    render(props){
        return (
                <div className="ratio-alcohol">
                    <Weight valueChanged={ this.setChangeWeight } weight={ this.state.weight } />
                </div>
        );
    }
}