Skip to content

Commit 933ddc4

Browse files
Fix style mistakes
1 parent 649211b commit 933ddc4

File tree

2 files changed

+7
-7
lines changed

2 files changed

+7
-7
lines changed

src/content/learn/manipulating-the-dom-with-refs.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -344,21 +344,21 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu
344344
## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
345345

346346
<Pitfall>
347-
Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
347+
Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
348348
</Pitfall>
349349

350350
You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
351351

352352
```js {3-4,9}
353353
import { useRef } from 'react';
354354

355-
function MyInput({ref}) {
355+
function MyInput({ ref }) {
356356
return <input ref={ref} />;
357357
}
358358

359359
function MyForm() {
360360
const inputRef = useRef(null);
361-
return <><MyInput ref={inputRef} /></>
361+
return <MyInput ref={inputRef} />
362362
}
363363
```
364364

@@ -371,7 +371,7 @@ The `inputRef` created in `MyForm` now points to the `<input>` DOM element retur
371371
```js
372372
import { useRef } from 'react';
373373

374-
function MyInput({ref}) {
374+
function MyInput({ ref }) {
375375
return <input ref={ref} />;
376376
}
377377

@@ -406,7 +406,7 @@ In the above example, the ref passed to `MyInput` is passed on to the original D
406406
```js
407407
import { useRef, useImperativeHandle } from "react";
408408

409-
const MyInput = ({ ref }) => {
409+
function MyInput({ ref }) {
410410
const realInputRef = useRef(null);
411411
useImperativeHandle(ref, () => ({
412412
// Only expose focus and nothing else

src/content/reference/react/useRef.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,7 @@ Sometimes, you may want to let the parent component manipulate the DOM inside of
455455
```js
456456
import { useRef } from 'react';
457457

458-
const MyInput = ({ref}) => {
458+
function MyInput({ ref }) {
459459
return <input ref={ref} />;
460460
};
461461

@@ -576,7 +576,7 @@ export default function MyInput({ value, onChange }) {
576576
And then add `ref` to the list of props your component accepts and pass `ref` as a prop to the relevent child [built-in component](/reference/react-dom/components/common) like this:
577577
578578
```js {1,6}
579-
const MyInput = ({ value, onChange, ref}) => {
579+
function MyInput({ value, onChange, ref }) {
580580
return (
581581
<input
582582
value={value}

0 commit comments

Comments
 (0)