---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: jsx/arrow_function.jsx
---

# Input

```jsx
function BackTopContent(props){
	return (
		<CSSMotion>
			{({ className: motionClassName }) =>
				cloneElement(className => ({
					className
				}))}
		</CSSMotion>
	);
}

function BackTopContent(props){
	return (
		<CSSMotion>
			{({ className: motionClassName }) =>
				cloneElement(className => ({
					className
				}))/*with comment*/}
		</CSSMotion>
	);
}

function ArrowBodyIsJsxWithComment({ action }) {
	return (action) =>
		(
			// eslint-disable-next-line react/no-array-index-key
			<li/>
		);
}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Line width: 80
Quote style: Double Quotes
Quote properties: As needed
Trailing comma: All
Semicolons: Always
-----

```jsx
function BackTopContent(props) {
	return (
		<CSSMotion>
			{({ className: motionClassName }) =>
				cloneElement((className) => ({
					className,
				}))
			}
		</CSSMotion>
	);
}

function BackTopContent(props) {
	return (
		<CSSMotion>
			{
				({ className: motionClassName }) =>
					cloneElement((className) => ({
						className,
					})) /*with comment*/
			}
		</CSSMotion>
	);
}

function ArrowBodyIsJsxWithComment({ action }) {
	return (action) => (
		// eslint-disable-next-line react/no-array-index-key
		<li />
	);
}
```