React not rendering prop?

Question

So for some reason react is not rendering my txt property in my simple app. This is my code in App.js file :

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  render() {
    return <h1> {this.props.txt}</h1>

  }
}
ReactDOM.render(<App txt="Hello world"/>, document.getElementById('app'))

This is the errors I get in chrome developer tools console:

index.js:9576 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).warning @ index.js:9576createElement @ index.js:26847(anonymous function) @ index.js:7558__webpack_require__ @ index.js:20(anonymous function) @ index.js:48__webpack_require__ @ index.js:20(anonymous function) @ index.js:40(anonymous function) @ index.js:43
index.js:8492 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

What version of React are you using? – Ben Hare Aug 05 '16 at 14:52 — Ben Hare, Aug 05 '16 at 14:52

score 0 · Answer 1 · answered Aug 04 '16 at 23:22

0

Code is fine.. must be a problem with something else (perhaps webpack or babel setup?)

See example below

https://jsfiddle.net/9dnu3pt8/

answered Aug 04 '16 at 23:22

John

2,894
2
20
25

score 0 · Answer 2 · answered Aug 04 '16 at 23:22

You code is fine and should work, there's something with your environment, Are you using webpack? If so, you need to add some presets to work with ecma 2015.

follows a sample of package.json file

{
  "name": "project",
  "version": "0.0.0",
  "description": "",
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "react-dom": "~15.3.0",
    "react": "~15.3.0"
  },
  "devDependencies": {
    "webpack": "~1.13.1",
    "babel-loader": "~6.2.4",
    "babel-preset-react": "~6.11.1",
    "babel-core": "~6.11.4",
    "babel-preset-es2015": "~6.9.0"
  }
}

and webpack.config.js file

module.exports = {
    entry: "./app/App.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}

React not rendering prop?

2 Answers2