Jsx Props No Spreading

Jsx Props No Spreading
Fix - Prop spreading is forbidden warning in React
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
You can use the search field on my Home Page to filter through all of my articles.
The warning "Props spreading is forbidden" is caused when we use the spread
syntax to unpack a props object when passing props to a component. To get around
the warning, disable the eslint rule.
Here is an example of how the warning is caused.
The best way to get rid of the warning is to disable the rule in your
.eslintrc file.
Alternatively, you can disable the rule for a single file by adding the
following comment at the top of your file.
The
ESlint rule
expects us to not use the
spread syntax (...)
to unpack an object when passing props, but instead pass single props to the
component.
However, most of the time the rule is more of an annoyance than it actually
helps, so it's best to just turn it off.
Copyright © 2022 Borislav Hadzhiev

Features

Mobile

Actions

Codespaces

Copilot

Packages

Security

Code review

Issues

Discussions

Integrations

GitHub Sponsors

Customer stories

Explore GitHub

Learn and contribute

Topics

Collections

Trending

Skills

GitHub Sponsors

Open source guides

Connect with others

The ReadME Project

Events

Community forum

GitHub Education

GitHub Stars program

Plans

Compare plans

Contact Sales

Education

In this repository

All GitHub

↵

In this repository

All GitHub

↵

In this organization

All GitHub

↵

In this repository

All GitHub

↵

jsx-eslint

/

eslint-plugin-react

Public

Code

Issues

Pull requests

Actions

Security

Insights

Solavon opened this issue
Aug 20, 2019
· 14 comments

Solavon opened this issue
Aug 20, 2019
· 14 comments

'react/jsx-props-no-spreading': ['error', {
html: "ignore",
custom: "ignore",
exceptions: [],
}],

"eslint": "^6.2.0",
"eslint-plugin-react": "^7.14.3",

ljharb

added
the

question

label

Aug 20, 2019

ljharb

closed this as completed

Aug 20, 2019

👍
3
Felipesdeveloper, joelstransky, and 0xVoushi reacted with thumbs up emoji
👀
4
Solavon, MichaelPretorius, Felipesdeveloper, and ruanmer reacted with eyes emoji

All reactions

👍
3 reactions

👀
4 reactions

🎉
1
ljharb reacted with hooray emoji
❤️
1
ljharb reacted with heart emoji

All reactions

🎉
1 reaction

❤️
1 reaction

get rid of the configuration error

…

Cannot pass a configuration object that ignores everything and has no exception
jsx-eslint/eslint-plugin-react#2387

hkulur

mentioned this issue

Sep 17, 2019

'react/jsx-props-no-spreading': ['error', {
html: "ignore",
custom: "ignore",
exceptions: [""],
}],

'react/jsx-props-no-spreading': ['off']

👍
6
KZTN, johncovv, AdamAnSubtractM, tekylo, fegvilela, and dennis-gonzales reacted with thumbs up emoji
🎉
1
lucasjsr2 reacted with hooray emoji

All reactions

👍
6 reactions

🎉
1 reaction

🎉
1
mhigley reacted with hooray emoji

All reactions

🎉
1 reaction

"rules" : {
"react/jsx-props-no-spreading" : [
" error " ,
{
"explicitSpread" : " enforce " ,
"html" : " ignore " ,
"custom" : " ignore " ,
"exceptions" : []
}
]
}
Configuration for rule "react/jsx-props-no-spreading" is invalid:
Value {"explicitSpread":"enforce","html":"ignore","custom":"ignore","exceptions":[]} should NOT be valid.

Sign up for free
to join this conversation on GitHub .
Already have an account?
Sign in to comment

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement . We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

While setting up my eslint rules, I ran into some issues when configuring jsx-props-no-spreading
Expected:
Allow props spreading when the following rule is set
Actual:
Getting the following error
Error: .eslintrc.js:
Configuration for rule "react/jsx-props-no-spreading" is invalid:
Value {"html":"ignore","custom":"ignore","exceptions":[]} should NOT be valid.

The text was updated successfully, but these errors were encountered:

This is intentional; there's no point in using the rule if you're ignoring everything and have no exceptions: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-props-no-spreading.js#L48-L63
If you add an exception, or change one of the ignores to "enforce", it should work.
I understand that it would be pointless, but unfortunately it's part of the airbnb rules that comes with its extension, in any case, after keeping it for a while I can already see its benefit, thank you!
The airbnb config doesn’t ignore both kinds of components.
No, as in, this rule came as part of the airbnb config, and I was trying to turn it off.
Thanks for teaching me that :P
But I'm going to keep it on for the time being!
after keeping it for a while I can already see its benefit, thank you!
Just for the record:
If you wish to use the rule and wish to ignore instead of setting it off . This is how you should use:
In the rule definition, all the fields are made compulsory and specially exceptions is suppose to have an array of string not empty, so the declaration of rules goes like follow
For setting it off you can use either any of the following
This may seem obvious to most people but wasn't to me, this can be set up in an eslintrc.json or eslintrc.js file or in your package.json file by adding a rules object like so:
"rules": { "react/jsx-props-no-spreading": 0 }
This doesn't work for some reason.. What am I missing? @ljharb

< MyButton color = " blue " shadowSize = { 2 } >
Click Me

React . createElement (
MyButton ,
{ color : 'blue' , shadowSize : 2 } ,
'Click Me'
)
React . createElement (
'div' ,
{ className : 'sidebar' }
)
import React from 'react' ; import CustomButton from './CustomButton' ;
function WarningButton ( ) {
// return React.createElement(CustomButton, {color: 'red'}, null); return < CustomButton color = " red " /> ;
}
import React from 'react' ;

const MyComponents = {
DatePicker : function DatePicker ( props ) {
return < div > Imagine a { props . color } datepicker here. ;
}
}

function BlueDatePicker ( ) {
return < MyComponents.DatePicker color = " blue " /> ; }
import React from 'react' ;

// Wrong! This is a component and should have been capitalized: function hello ( props ) { // Correct! This use of is legitimate because div is a valid HTML tag:
return < div > Hello { props . toWhat }

;
}

function HelloWorld ( ) {
// Wrong! React thinks

is an HTML tag because it's not capitalized: return < hello toWhat = " World " /> ; }
import React from 'react' ;

// Correct! This is a component and should be capitalized: function Hello ( props ) { // Correct! This use of

is legitimate because div is a valid HTML tag:
return < div > Hello { props . toWhat }

;
}

function HelloWorld ( ) {
// Correct! React knows

is a component because it's capitalized. return < Hello toWhat = " World " /> ; }
import React from 'react' ;
import { PhotoStory , VideoStory } from './stories' ;

const components = {
photo : PhotoStory ,
video : VideoStory
} ;

function Story ( props ) {
// Wrong! JSX type can't be an expression. return < components [ props . storyType ] story = { props . story } / > ; }
import React from 'react' ;
import { PhotoStory , VideoStory } from './stories' ;

const components = {
photo : PhotoStory ,
video : VideoStory
} ;

function Story ( props ) {
// Correct! JSX type can be a capitalized variable. const SpecificStory = components [ props . storyType ] ; return < SpecificStory story = { props . story } /> ; }
< MyComponent foo = { 1 + 2 + 3 + 4 } />
function NumberDescriber ( props ) {
let description ;
if ( props . number % 2 == 0 ) { description = < strong > even ; } else { description = < i > odd ; } return < div > { props . number } is an { description } number ;
}
< MyComponent message = " hello world " />

< MyComponent message = { 'hello world' } />
< MyComponent message = " < 3 " />

< MyComponent message = { '<3' } />
< MyTextBox autocomplete />

< MyTextBox autocomplete = { true } />
function App1 ( ) {
return < Greeting firstName = " Ben " lastName = " Hector " /> ;
}

function App2 ( ) {
const props = { firstName : 'Ben' , lastName : 'Hector' } ;
return < Greeting { ... props } /> ; }
const Button = props => {
const { kind , ... other } = props ; const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton" ;
return < button className = { className } { ... other } /> ;
} ;

const App = ( ) => {
return (
< div >
< Button kind = " primary " onClick = { ( ) => console . log ( "clicked!" ) } >
Hello World!

) ;
} ;
< MyComponent > Hello world!
< div > This is valid HTML & JSX at the same time.
< div > Hello World

< div >
Hello World

< div >
Hello
World

< div >

Hello World

< MyContainer >
< MyFirstComponent />
< MySecondComponent />

< div >
Here is a list:
< ul >
< li > Item 1
< li > Item 2

render ( ) {
// No need to wrap list items in an extra element!
return [
// Don't forget the keys :)
< li key = " A " > First item ,
< li key = " B " > Second item ,
< li key = " C " > Third item ,
] ;
}
< MyComponent > foo

< MyComponent > { 'foo' }
function Item ( props ) {
return < li > { props . message } ; }

function TodoList ( ) {
const todos = [ 'finish doc' , 'submit pr' , 'nag dan to review' ] ;
return (
< ul >
{ todos . map ( ( message ) => < Item key = { message } message = { message } /> ) }
) ;
}
function Hello ( props ) {
return < div > Hello { props . addressee } ! ; }
// Calls the children callback numTimes to produce a repeated component
function Repeat ( props ) {
let items = [ ] ;
for ( let i = 0 ; i < props . numTimes ; i ++ ) { items . push ( props . children ( i ) ) ;
}
return < div > { items } ;
}

function ListOfTenThings ( ) {
return (
< Repeat numTimes = { 10 } >
{ ( index ) => < div key = { index } > This is item { index } in the list }
) ;
}
< div />

< div >

< div > { false }

< div > { null }

< div > { undefined }

< div > { true }
< div >
{ showHeader && < Header /> } < Content />

< div >
{ props . messages . length && < MessageList messages = { props . messages } />
}

< div >
{ props . messages . length > 0 && < MessageList messages = { props . messages } />
}

< div >
My JavaScript variable is { String ( myVariable ) } .
Is this page useful? Edit this page
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:
You can also use the self-closing form of the tag if there are no children. So:
If you want to test out how some specific JSX is converted into JavaScript, you can try out the online Babel compiler .
The first part of a JSX tag determines the type of the React element.
Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.
Since JSX compiles into calls to React.createElement , the React library must also always be in scope from your JSX code.
For example, both of the imports are necessary in this code, even though React and CustomButton are not directly referenced from JavaScript:
If you don’t use a JavaScript bundler and loaded React from a tag, it is already in scope as the React global.
You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker is a component, you can use it directly from JSX with:
When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement . Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
For example, this code will not run as expected:
To fix this, we will rename hello to Hello and use <Hello /> when referring to it:
You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
To fix this, we will assign the type to a capitalized variable first:
There are several different ways to specify props in JSX.
You can pass any JavaScript expression as a prop, by surrounding it with {} . For example, in this JSX:
For MyComponent , the value of props.foo will be 10 because the expression 1 + 2 + 3 + 4 gets evaluated.
if statements and for loops are not expressions in JavaScript, so they can’t be used in JSX directly. Instead, you can put these in the surrounding code. For example:
You can learn more about conditional rendering and loops in the corresponding sections.
You can pass a string literal as a prop. These two JSX expressions are equivalent:
When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
This behavior is usually not relevant. It’s only mentioned here for completeness.
If you pass no value for a prop, it defaults to true . These two JSX expressions are equivalent:
In general, we don’t recommend not passing a value for a prop, because it can be confused with the ES6 object shorthand {foo} which is short for {foo: foo} rather than {foo: true} . This behavior is just there so that it matches the behavior of HTML.
If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” syntax to pass the whole props object. These two components are equivalent:
You can also pick specific props that your component will consume while passing all other props using the spread syntax.
In the example above, the kind prop is safely consumed and is no
<a href="https://telegra.ph/Beautiful-Sperm-09-07">Beautiful Sperm</a>
<a href="https://telegra.ph/Lil-Jon-Get-Nasty-Get-Freaky-09-06">Lil Jon Get Nasty Get Freaky</a>
<a href="https://telegra.ph/Sperm-Selfie-09-07">Sperm Selfie</a>

Jsx Props No Spreading

Report Page