Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no-danger-with-children exception with spread props

See original GitHub issue

// .eslintrc.js
module.exports = {
    "root": true,

    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        }
    },

    "plugins": ["react"],

    "rules": {
        "react/no-danger-with-children": "error"
    }
};

// pass.jsx
<div />

// fail.jsx
<div {...props} />

$ npm ls --depth=0
~/test
├── eslint@3.3.0
└── eslint-plugin-react@6.1.0

$ node_modules/.bin/eslint pass.jsx
$ node_modules/.bin/eslint fail.jsx
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at ~/test/node_modules/eslint-plugin-react/lib/rules/no-danger-with-children.js:29:34
    at Array.find (native)
    at EventEmitter.JSXElement (~/test/node_modules/eslint-plugin-react/lib/rules/no-danger-with-children.js:28:41)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
    at NodeEventGenerator.enterNode (~/test/node_modules/eslint/lib/util/node-event-generator.js:40:22)
    at CodePathAnalyzer.enterNode (~/test/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
    at CommentEventGenerator.enterNode (~/test/node_modules/eslint/lib/util/comment-event-generator.js:97:23)
    at Controller.traverser.traverse.enter (~/test/node_modules/eslint/lib/eslint.js:895:36)
    at Controller.__execute (~/test/node_modules/estraverse/estraverse.js:397:31)

Issue Analytics

State:
Created 7 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

petersendiditcommented, Aug 15, 2016

I can work on a fix.

0reactions

yannickcrcommented, Aug 15, 2016

Thanks @petersendidit. The PR was merged, a bugfix release will be published tonight.

Top Results From Across the Web

no-danger-with-children exception when props contains spread

768 fixed #767 directly by allowing {...props} on JSX elements, but it's getting tripped up when it goes to find the definition of...

eslint-plugin-react | Yarn - Package Manager

Require or prevent a new line after jsx elements and expressions.. jsx-no-bind, Disallow .bind() or arrow functions in JSX props.

eslint-config-torchbox - npm

This configuration can be used as-is even for mixed or JavaScript-only projects, but does require the typescript package to be installed.

Use spread props with additional props - Stack Overflow

You would have to construct the Object with a spread, add the extra prop, then spread that object into the AccountStatus props. <AccountStatus...

How to Overload TypeScript React Component Interfaces by ...

Without TypeScript or propTypes, or in the listed exceptions, prop spreading is usually considered unsafe because of the possibility of unknown attributes ...