Unknown prop- react

Question

Currently learning react, when i try and run the following code:

var userData = {
 name: 'Evans D',
 occupation: ' Logistics Planner',
 location: 'Birmingham, UK',
 img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ'
};

class userInfo extends React.Component {
  render() {
    return (
      <div>
       <h1>Name: {this.props.user.name} </h1>
       <h2>Occupation: {this.props.user.occupation} </h2>
       <h3>Location: {this.props.user.location} </h3>
       // <img src={this.props.user.img} />
      </div>
    )
  }
}

ReactDOM.render(
  <userInfo user={userData}/>,
  document.getElementById('userInfo')
);

<!DOCTYPE html>
<html>
<head>
 <title>Github Battle</title>
</head>
<body>
<div id='userInfo'></div>
</body>
</html>

Console throws the following error :

'Unknown prop user on tag. Remove this prop from the element.'

Any ideas on what I'm doing wrong?

Error or warning? Any chance you could add the full message? I guess you could define the propTypes for your component. What is more disturbing for me, is that you use camelCased class names, though it should be in PascalCase — Icepickle, Jul 07 '17 at 16:01
Warning: Unknown prop `user` on tag. Remove this prop from the element. — Evans, Jul 07 '17 at 16:02
reminds me of this question https://stackoverflow.com/q/44926777/6787455 — taha, Jul 07 '17 at 16:08

score 2 · Answer 1 · answered Jul 07 '17 at 16:02

The user props seems fine to me. However, I notice 3 Things that are out of place in your snippet.

You have to use babeljs / es2015 option in code snippet to write JSX.
You need to include react library to use it.
Make sure that your component name is capitalised.

See working code below

var userData = {
 name: 'Evans D',
 occupation: ' Logistics Planner',
 location: 'Birmingham, UK',
 img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ'
};

class UserInfo extends React.Component {
  render() {
    return (
      <div>
       <h1>Name: {this.props.user.name} </h1>
       <h2>Occupation: {this.props.user.occupation} </h2>
       <h3>Location: {this.props.user.location} </h3>
       // <img src={this.props.user.img} />
      </div>
    )
  }
}

ReactDOM.render(
  <UserInfo user={userData}/>,
  document.getElementById('userInfo')
);

<!DOCTYPE html>
<html>
<head>
 <title>Github Battle</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id='userInfo'></div>
</body>
</html>

Thanks for this... much appreciated. – Evans Jul 07 '17 at 16:14 — Evans, Jul 07 '17 at 16:14

score 1 · Accepted Answer · answered Jul 07 '17 at 16:21

Your component name should be in PascalCase. when react tries to render <userInfo user={userData}/> it will think that you are using a non-standard DOM attribute user on a native DOM node userInfo (without any doubt it's not) thus throwing the warning.

Unknown prop- react

2 Answers2