childrenProps

Reports usage of the children prop.

✅ This rule is included in the jsx stylistic presets.

In JSX, children are generally intended to be passed as content between opening and closing tags rather than as a children prop. This makes the JSX more readable and maintainable by following the standard JSX pattern.

Examples

❌ Incorre

CE6dCB0childrA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DHel1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>A82ComponeAB0childrA3<4{sp ansty="le--1:#8844">CE6spCsp ansty="le--0:#D6DEEB;--1:#403F">53Tesp>CA<E6spCsp ansty="le--0:#E2817F;--1:#B238">3sp><4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6buttCB0childrA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">5<3[sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DClick 1<1"sp ansty="le--0:#D6DEEB;--1:#403F">5<3]sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53H><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D

<>di vdivclass="Nameexpressive-">4<4AE< spans="tyle--0:#F78C6C;--1:#AA">0982Compo4<4AE >divclass="Nameec-">de<44AE spans="tyle--0:#7F">DECE6D spans="tyle--0:#D6DEEB;--1:#40">3F53><44AE spans="tyle--0:#7F">DBECE6D440982Compo4<4AE >divclass="Name">di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD spans="tyle--0:#D6DEEB;--1:#40">3F53Clic><44AE spans="tyle--0:#7F">DBECE6buDdi>

When Not To Use It

If you prefer the consistency of always using named props including children over aligning with common JSX conventions, you might prefer to disable this rule.

Further Reading

• React Documentation: JSX In Depth
• MDN: JSX

Equivalents in Other Linters

• Biome: noChildrenProp
• Deno: jsx-no-children-prop
• ESLint: react/no-children-prop@eslint-react/jsx-no-children-prop
• Oxlint: react/no-children-prop