CODEWITHSUNDEEP
javascriptreactjs
KidCode
KidCode

Reputation: 4201

How do I pass props to a react component?

Apologies for the, 'Please find the bug in my code' question, but I'm struggling trying to get to grips with React.

I'm trying to pass a variable named hashRoute to a component in react, but whenever I try to access the prop using this.props.route within the component render method, I get a browser warning saying:

"Warning: Unknown prop route on tag. Remove this prop from the element.

My Component:

var App = React.createClass({
    render: function(){
        var Child;
        switch(this.props.route)
        {
            case 'about':
                Child = about;
                break;
            default: 
                Child = Home;
                break;
        }

        return (
            <div>
                <Child/>
            </div>
        );
    }
});

Calling function:

function render(){
    var hashRoute = window.location.hash.substr(1);
    ReactDOM.render(<app route = {hashRoute} />, document.getElementById('app'));
}

window.addEventListener('hashChange', render);

I'm obviously ddoing something wrong, but I'm not entirely sure what. I've also tried using the spread syntax (replacing <app route = {hashRoute} /> with <app {...hashRoute} /> but then I get another browser warning telling me that React.__spread is deprecated and should not be used.

Any ideas would be greatly appreciated.

Upvotes: 1

Views: 716

Answers (1)

Rob Brander
Rob Brander

Reputation: 3771

A little-known fact about React components: The name of your component MUST start with an uppercase letter. This is to differentiate from the components in React reserved for HTML (like div, span, etc).

Upvotes: 5

Related Questions