Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint errors on JSX/React

I am working with React and this is my first time, I need to know what this errors are and how to fix it

app/app.js
  21:49   error  'socket' is missing in props validation for App  react/prop-types
  22:47   error  'room' is missing in props validation for App    react/prop-types
  23:47   error  'mode' is missing in props validation for App    react/prop-types
  24:47   error  'user' is missing in props validation for App    react/prop-types
  26:32   error  'socket' is missing in props validation for App  react/prop-types
  26:57   error  'room' is missing in props validation for App    react/prop-types
  26:80   error  'mode' is missing in props validation for App    react/prop-types
  26:103  error  'user' is missing in props validation for App    react/prop-types

and here is the file where I am getting the error

const query = qs.parse(location.search);
const config = {
  socket : query.socket || 'http://10.28.10.85:1101/chat',
  room   : query.room || 'BJTest',
  mode   : query.mode || 'player',
  user   : query.user || 'Alberto',
};

class App extends React.Component {

  constructor (props) {
    super(props);
  }

  render () {
    return (<div>
      <div><strong>Socket:</strong> {this.props.socket}</div>
      <div><strong>Room:</strong> {this.props.room}</div>
      <div><strong>Mode:</strong> {this.props.mode}</div>
      <div><strong>User:</strong> {this.props.user}</div>
      <hr />
      <Chat socket={this.props.socket} room={this.props.room} mode={this.props.mode} user={this.props.user} />
    </div>);
  }

}
like image 801
Non Avatar asked Oct 27 '15 19:10

Non


People also ask

Does ESLint work with JSX?

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins.

How do you fix ESLint?

There are three ways that ESLint fix can be run: eslint --fix. eslint --fix-dry-run. eslint --fix --fix-type.


1 Answers

I think you need to define proptypes that are used in App and Chat components. See: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es6-classes for definition.

Example:

App.propTypes = {
  socket: React.PropTypes.string.isRequired,
  room: React.PropTypes.string.isRequired,
  mode: React.PropTypes.string.isRequired,
  user: React.PropTypes.string.isRequired
};
like image 166
Samuli Hakoniemi Avatar answered Oct 13 '22 18:10

Samuli Hakoniemi