React Uncaught Invariant Violation: Invalid tag:

Question

I'm getting a few errors in the browsers console

Warning: Element: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 

Warning: Element: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 

Uncaught Invariant Violation: Invalid tag: {StrainGrid}

Weird thing is, webpack isn't spitting out any error.

This is my App.js file:

import React from 'react';
import { render } from 'react-dom';

import sass from './styles/style.scss';

import Main from './components/Main';
import Single from './components/Single';
import StrainGrid from './components/StrainGrid';

import { Router, Route, IndexRoute, browserHistory } from 'react-router';

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={StrainGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}></Route>
    </Route>
  </Router>
)

render(router, document.getElementById('root'));

And this is Main.js:

import React from 'react';
import { Link } from 'react-router';

const Main = React.createClass({
  render() {
    return (
      <div>
        <h1><Link to="/">Strain Guide</Link></h1>
        {React.cloneElement(this.props.children, this.props)}
      </div>
    )
  }
});


export default Main;

StrainGrid component:

import React from 'react';

const StrainGrid = React.createClass({
  render() {
    return (
       <div className="straing-grid">
          Grid
        </div>
    )
  }
});

export default StrainGrid;

Any help would be great. Don't know why Im getting these.

Answer 1

React Uncaught Invariant Violation: Invalid tag:

Change this:

{React.cloneElement(this.props.children, this.props)}

to

{React.cloneElement(this.props.children, { ...this.props })