title: How to pass callback functions with parameters from parent to child components?
body: <p>I'm really new to ReactJS framework.
  I'm trying to pass a callback function from parent to child component.</p>
  
  <p>What i'm trying to pass is a callback function (changeState) to a child component. The child component is a fabric-ui button and this function will be called when clicking on the button.</p>
  
  <p><strong>Parent code : only the necessary code</strong></p>
  
  <pre><code>public constructor(props: {}) {
      super(props);
  
      this.state = {
        columns: [],
        hasError:false,
        sortedItems: []
      };  
      this.changeState = this.changeState.bind(this);
    }
  public changeState = (itemId:React.ReactText)=&gt;{
      const resolvedKey='Status';
      const idKey='Status';
      const item = this.state.sortedItems!.filter(ite =&gt; ite[idKey] === itemId)[0];
      item[resolvedKey] = 'Résolu';
    }
  &lt;ResolveButton disabled={isResolved} uniqueId={fieldContent} changeState={this.changeState  } /&gt; 
  </code></pre>
  
  <p><strong>Child code</strong></p>
  
  <pre><code>import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
  import * as React from 'react';
  
  export interface IHandleChange {
      changeState: (itemId:React.ReactText)=&gt;void;
      disabled:boolean;
      uniqueId:string| number;
  }
  export class ResolveButton extends React.Component&lt;IHandleChange, {}&gt; {
      constructor(props:any) {
  
          super(props);
      }
      public handleClick = () =&gt; {
          this.props.changeState(this.props.uniqueId);
          alert(`Item ${this.props.uniqueId}`);
      }
  
      public render(): JSX.Element {
          return (
              &lt;div&gt;
                  {
                      !this.props.disabled &amp;&amp; 
                      &lt;PrimaryButton
                          data-automation-id="test"
                          text="Résolu"
                          onClick={this.handleClick}
                          allowDisabledFocus={true}
                      /&gt;
                  }
              &lt;/div&gt;
          );
      }
  }
  export default ResolveButton;
  </code></pre>
  
  <p>The problem is that the child component is not even created when i execute the code above. However the child component is created when i don't pass the callback function (changestate).
  This has nothing to do with the parameters disabled and uniqueId passed to the child components. what i'm trying to say is that if i try to remove changeState in the child node interface the child component is well created, however once i introduce changeState in the interface and try to pass it from the parent component the child is never shown in the DOM.</p>