Skip to content

Commit

Permalink
Merge pull request airbnb#1620 from lasota-piotr/classname-props
Browse files Browse the repository at this point in the history
[guide] [react] Added anti-pattern example for Props Naming rule, changed className props in examples
  • Loading branch information
ljharb authored Oct 25, 2017
2 parents dbdf8ea + 9d3e7e0 commit 9edcdde
Showing 1 changed file with 7 additions and 4 deletions.
11 changes: 7 additions & 4 deletions react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,9 @@
// bad
<MyComponent style="fancy" />
// bad
<MyComponent className="fancy" />
// good
<MyComponent variant="fancy" />
```
Expand Down Expand Up @@ -400,15 +403,15 @@
```jsx
// bad
render() {
return <MyComponent className="long body" foo="bar">
return <MyComponent variant="long body" foo="bar">
<MyChild />
</MyComponent>;
}
// good
render() {
return (
<MyComponent className="long body" foo="bar">
<MyComponent variant="long body" foo="bar">
<MyChild />
</MyComponent>
);
Expand All @@ -427,10 +430,10 @@

```jsx
// bad
<Foo className="stuff"></Foo>
<Foo variant="stuff"></Foo>
// good
<Foo className="stuff" />
<Foo variant="stuff" />
```

- If your component has multi-line properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
Expand Down

0 comments on commit 9edcdde

Please sign in to comment.