How to pass a prop into a component?

Question

I got started with Reactjs and have some trouble getting a demo working. If you are interested I have the whole project open sourced.

I have a searchBox that contains a SearchForm. Once the user posts the search, SearchResult should show the json from server.

React.render(
    <SearchBox url="http://127.0.0.1:5000/search"/>,
    document.getElementById('search-golden-facilities')
);

var SearchBox = React.createClass({
    handleSearchSubmit: function(search_param){
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            type: 'POST',
            data: search_param,
            success: function(data){
                this.setState({data:data});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function () {
        return {data: [{"x": "huh"}]};
    },
    render: function(){
        return (
            <div className="searchBox">
                SID <SearchForm onSearchSubmit={this.handleSearchSubmit} />
            </div>
        )
    }
});

var SearchForm = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var sid = this.refs.sid.getDOMNode().value.trim();
        if(!sid) {
            return;
        }
        this.props.onSearchSubmit({sid: sid});
        this.refs.sid.getDOMNode().value = '';
        return;
    },
    render: function () {
        return (
            <form className="searchForm" onSubmit={this.handleSubmit}>
                <input type="search" placeholder="Enter SID" ref="sid"/>
                <input type="submit" value="Search"/>
            </form>
        );
    }
});

Where it gets problematic is the SearchResult:

React.render(
    <SearchResult data='{"x":"test"}'/>,
    document.getElementById('result-golden-facilities')
);

var SearchResult = React.createClass({
   render: function(){
       var resultRows = this.props.data.map(function(result){
           return (
                <p>{result.x}</p>
           );
       });
       return (
           <div className="searchResult">
                {resultRows}
           </div>
       );
   }
});

I get a javascript error in Chrome console:

Uncaught TypeError: undefined is not a function

It seems that data is undefined. I don't understand why, as I define it in the initial state.

var resultRows = this.props.data.map(function(result){

Any suggestions?

Answer 1

When you wrap your properties with single quote React sends them to component as a string. It's better to use {:

React.render(
    <SearchResult data={ {"x":"test"} } />,
    document.getElementById('result-golden-facilities')
);

or for better readability:

var data = { x: 'test' };
React.render(
    <SearchResult data={ data } />,
    document.getElementById('result-golden-facilities')
);

Another issue in your code is how you use .map(). You are trying to use native javascript map method on object, which doesn't exist. Either you should change your data into array:

var data = [{ x: 'test' }];

or simply render:

var SearchResult = React.createClass({
   render: function(){
       return (
           <div className="searchResult">
                {this.props.data.x}
           </div>
       );
   }
});