title: passing state value to a child component via props
body: <p>i'm trying to pass the value entered by the user from the app component to the passTicket component. I tried invoking props to pass this state data but I keep getting an undefined error when attempting to access it. I'm new to react and it would be great if someone can help me make sense of what i'm getting wrong. This is a sample of what i'm trying to achieve. 
  This is my main component:</p>
  
  <pre><code>class App extends Component {
  
    constructor(props){
      super(props);
      this.state = {
        ticket:"",
      };
      this.changeTicket = this.changeTicket.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.keyPress = this.keyPress.bind(this);
    }
  
    changeTicket(e){
      this.setState({
        ticket : e.target.value,
      })
    }
  
    handleSubmit(){
      this.setState({
        updatedTicket: this.state.ticket
      });
    }
  
    keyPress(e){
      if (e.keyCode ===13){
        this.handleSubmit();
      }
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;input type="text" placeholder="ENTER TICKET NUMBER" value={this.state.ticket} onKeyDown={this.keyPress} onChange={this.changeTicket}/&gt;
          &lt;/header&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and i'd like to be able to store the updatedTicket value in a variable which I can use in my PassTicket component. this is what i've attempted so far but the error it occurs is the following <code>Uncaught TypeError: Cannot read property 'updatedTicket' of undefined</code></p>
  
  <p>this is what my second component looks like:</p>
  
  <pre><code>class PassTicket extends Component {
  
    transferredTicket(){
      const myTicket = this.props.state.updatedTicket;
      return myTicket
    }
  
    render() {
      return (
          &lt;p&gt;{this.transferredTicket()}&lt;/p&gt;
      );
    }
  }
  </code></pre>