title: how to call a function from another component in react
body: <p>I am appending a text box on click of Add New Candidate button and I also want to call validate the function of NewCandidate component on the click of save button I have tried with the following code but it's throwing an error if anybody knows the solution please answer.........................................................................................................................................</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Hello React!&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"&gt;&lt;/script&gt;    
      &lt;script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"&gt;&lt;/script&gt;    
        &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;   
      &lt;script type="text/jsx"&gt;
      class NewCandidate extends React.Component{
          validate(){
              alert()
          }       
          render(){
              return(
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;th colSpan="2"&gt;Candidate details&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;&lt;td&gt;&lt;input type="text" ref="candName" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              )
          }
      }
      var CandidateList = [&lt;NewCandidate /&gt;];
  
          class Interview extends React.Component{
              constructor(props){
                  super();
                  this.state={candidates:props.candidates}
  
              }
              updateCandidateList(newCandidate){
                  var updatedCandidates=this.state.candidates;
                  updatedCandidates.push(newCandidate);
                  this.setState({candidates: updatedCandidates})  
              }
              render(){   
                  return(
                      &lt;div&gt;
                          &lt;Candidate candidates={this.state.candidates} /&gt;
                          &lt;AddNewCandidate candidateList={this.updateCandidateList.bind(this)} /&gt;                     
                      &lt;/div&gt;              
                  )
              }       
          }
          class AddNewCandidate extends React.Component{
              constructor(){
                  super()             
              }
              addNewCandidate(e){
                  e.preventDefault();             
                  this.props.candidateList(&lt;NewCandidate /&gt;)
              }   
              render(){
                  return(
                      &lt;form&gt;
                          &lt;button onClick={this.addNewCandidate.bind(this)}&gt;Add New Candidate&lt;/button&gt;    
                          &lt;button type="button" onClick={NewCandidate.validate.bind(this)}&gt;Save&lt;/button&gt;  
                      &lt;/form&gt;
                  )
              }
          }
          class Candidate extends React.Component{
              constructor(props){
                  super(props);
              }
              render(){
                  var items=this.props.candidates.map((item)=&gt;{
                      return (&lt;div&gt;{item}&lt;/div&gt;)
                  });
  
                  return(
                      &lt;div&gt;
                          {items}
                      &lt;/div&gt;
                  )
              }
          }   
          ReactDOM.render(&lt;Interview candidates={CandidateList}/&gt;,document.getElementById("root"));           
  &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>