Accessing React component's props

Question

Alright so I'm tinkering with ReactJS and working on simple examples, everything working great and I already feel it has improved my productivity. Now I am working on a simple React example that takes an app name and logs it to console when the Enter key press is detected. Everything working fine until I enter the app name in the input box and I press the Enter key, what I see then in the console log isn't the input value, but rather an "undefined" value. Here's the full JS Code:

"use strict";

var InputText = React.createClass({
    render() {
        return <div><p>Please input the app name you wish to access:</p></div>
    }
});

var InputBox = React.createClass({
    onKeyPress(e) {
      if (e.key === 'Enter') {
        console.log(this.props.value);
      }
    },
    render() {
        return <input type="text" onKeyPress={this.onKeyPress}></input>
    }
});

var AppForm = React.createClass({
    render() {
        return <div class="appForm">
            <InputText />
            <InputBox />
        </div>
    }
});

var App = React.createClass({
    render() {
        return <AppForm />
    }
});

ReactDOM.render(
    <App />,
    document.getElementById("container")
);

Answer 1

you didnt pass any props into . You would pass props like this

there are no props passed anywhere in this app actually :)

But what you really want is the value from the input box. So in React you'd make a reference. As a quick and dirty example I have a global context object ctx={}

<input type="text" className="inputClass" style={inputStyles} ref={(c) => ctx._input = c} />

Now in my component I can refer to the value typed as

ctx._input.value

Console.log that and it should be all good.

Answer 2

That's because you are not passing the value as a prop to your InputBox component.

You can get the value from the event

var InputBox = React.createClass({
    onKeyPress(e) {
      if (e.key === 'Enter') {
        console.log('InputBox Value: ' + e.target.value);
      }
    },
    render() {
        return <input type="text" onKeyPress={this.onKeyPress}></input>
    }
});

jsfiddle

Or store the value in the state and get it from there.

var InputBox = React.createClass({
    onKeyPress(e) {
      if (e.key === 'Enter') {
        console.log('InputBox Value: ' + this.state.value);
      }
    },
    render() {
        return <input type="text" onKeyPress={this.onKeyPress} onChange={(e) => this.setState({value: e.target.value})}></input>
    }
});

jsfiddle

Answer 3

Use ref to access the value of input box

"use strict";

var InputText = React.createClass({
    render() {
        return <div><p>Please input the app name you wish to access:</p></div>
    }
});

var InputBox = React.createClass({
    onKeyPress(e) {
      if (e.key === 'Enter') {
        console.log(this.refs.textbox.value);
      }
    },
    render() {
        return <input type="text" onKeyPress={this.onKeyPress} ref = 'textbox'></input>
    }
});

var AppForm = React.createClass({
    render() {
        return <div class="appForm">
            <InputText />
            <InputBox />
        </div>
    }
});

var App = React.createClass({
    render() {
        return <AppForm />
    }
});

ReactDOM.render(
    <App />,
    document.getElementById("container")
);

JSFIDDLE

Another way to obtain value will to use the event e as e.target.value . Props doesnt work because you are not actually passing props to the InputBox component.