Skip to main content

react/noThisInSFC

report this being used in stateless components

ESLint Equivalent: no-this-in-sfc

Examples

Invalid

const Foo = () => <div>{this.props.bar</div>

 file.tsx:1:44 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unterminated regular expression

    const Foo = () => <div>{this.props.bar</div>
                                                ^


const Foo = () => {
	return (
		<div>{this.props.bar}</div>
	);
}

 file.tsx:3:8 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1const Foo = () => {
    2  return (
  > 3    <div>{this.props.bar}</div>
               ^^^^
    4  );
    5}

  The this keyword has no binding in functional components. Use hooks
    instead.


const Foo = () => {
	const { bar } = this.props;
	return (
		<div>{ bar }</div>
	);
}

 file.tsx:2:17 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1const Foo = () => {
  > 2  const { bar } = this.props;
                       ^^^^
    3  return (
    4    <div>{ bar }</div>

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props) {
	return (
		<div>{this.props.bar}</div>
	);
}

 file.tsx:3:8 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props) {
    2  return (
  > 3    <div>{this.props.bar}</div>
               ^^^^
    4  );
    5}

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props) {
	const { bar } = this.props;
	return (
		<div>
			{ bar }
		</div>
	);
}

 file.tsx:2:17 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props) {
  > 2  const { bar } = this.props;
                       ^^^^
    3  return (
    4    <div>

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props, context) {
	return (
		<div>
			{this.context.foo ? this.props.bar : ''}
		</div>
	);
}

 file.tsx:4:4 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    2  return (
    3    <div>
  > 4      {this.context.foo ? this.props.bar : ''}
            ^^^^
    5    </div>
    6  );

  The this keyword has no binding in functional components. Use hooks
    instead.

 file.tsx:4:23 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    2  return (
    3    <div>
  > 4      {this.context.foo ? this.props.bar : ''}
                               ^^^^
    5    </div>
    6  );

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props, context) {
	const { foo } = this.context;
	const { bar } = this.props;
	return (
		<div>
			{foo ? bar : ''}
		</div>
	);
}

 file.tsx:2:17 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props, context) {
  > 2  const { foo } = this.context;
                       ^^^^
    3  const { bar } = this.props;
    4  return (

  The this keyword has no binding in functional components. Use hooks
    instead.

 file.tsx:3:17 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props, context) {
    2  const { foo } = this.context;
  > 3  const { bar } = this.props;
                       ^^^^
    4  return (
    5    <div>

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props) {
	if (this.state.loading) {
		return <Loader />;
	}
	return (
		<div>
			{this.props.bar}
		</div>
	);
}

 file.tsx:2:5 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props) {
  > 2  if (this.state.loading) {
           ^^^^
    3    return <Loader />;
    4  }

  The this keyword has no binding in functional components. Use hooks
    instead.

 file.tsx:7:4 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    5  return (
    6    <div>
  > 7      {this.props.bar}
            ^^^^
    8    </div>
    9  );

  The this keyword has no binding in functional components. Use hooks
    instead.


function Foo(props) {
	const { loading } = this.state;
	const { bar } = this.props;
	if (loading) {
		return <Loader />;
	}
	return (
		<div>
			{bar}
		</div>
	);
}

 file.tsx:2:21 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props) {
  > 2  const { loading } = this.state;
                           ^^^^
    3  const { bar } = this.props;
    4  if (loading) {

  The this keyword has no binding in functional components. Use hooks
    instead.

 file.tsx:3:17 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1function Foo(props) {
    2  const { loading } = this.state;
  > 3  const { bar } = this.props;
                       ^^^^
    4  if (loading) {
    5    return <Loader />;

  The this keyword has no binding in functional components. Use hooks
    instead.


React.memo(
	function Foo(props) {
		return (
			<div>{this.props.bar}</div>
		);
	}
)

 file.tsx:4:9 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    2  function Foo(props) {
    3    return (
  > 4      <div>{this.props.bar}</div>
                 ^^^^
    5    );
    6  }

  The this keyword has no binding in functional components. Use hooks
    instead.


React.forwardRef((props, ref) => (
	<div>
		{this.props.bar}
	</div>
));

 file.tsx:3:3 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1React.forwardRef((props, ref) => (
    2  <div>
  > 3    {this.props.bar}
          ^^^^
    4  </div>
    5));

  The this keyword has no binding in functional components. Use hooks
    instead.


const Foo = React.forwardRef((props, ref) => (
	<div>
		{this.props.bar}
	</div>
));

 file.tsx:3:3 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1const Foo = React.forwardRef((props, ref) => (
    2  <div>
  > 3    {this.props.bar}
          ^^^^
    4  </div>
    5));

  The this keyword has no binding in functional components. Use hooks
    instead.


const Foo = React.memo((props, ref) => (
		<div>
			{this.props.bar}
		</div>
	)
)

 file.tsx:3:4 lint/react/noThisInSFC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this in stateless functional components.

    1const Foo = React.memo((props, ref) => (
    2    <div>
  > 3      {this.props.bar}
            ^^^^
    4    </div>
    5  )

  The this keyword has no binding in functional components. Use hooks
    instead.

Valid

const Foo = (bar) => <div>{bar}</div>
function Foo(props) {
	return (
		<div>{props.bar}</div>
	);
}
function Foo(props) {
	const { bar } = props;
	return (
		<div>{bar}</div>
	);
}
function Foo({ bar }) {
	return (
		<div>{bar}</div>
	);
}
function Foo(props, context) {
		return (
			<div>
				{context.foo ? props.bar : ''}
			</div>
		);
}
function Foo(props, context) {
	const { foo } = context;
	const { bar } = props;
	return (
		<div>
			{foo ? bar : ''}
		</div>
	);
}
function Foo({ bar }, { foo }) {
	return (
		<div>
			{foo ? bar : ''}
		</div>
	);
}
class MyComponent extends React.Component {
	foo() {
			return <div>some jsx</div>
	}

	render() {
		return 'content'
	}
}
React.memo(
	function Foo(props) {
		return (
			<div>{props.bar}</div>
		);
	}
)
React.forwardRef((props, ref) => (
	<div>
		{props.bar}
	</div>
));
const Foo = React.forwardRef((props, ref) => (
	<div>
		{props.bar}
	</div>
));
const Foo = React.memo((props, ref) => (
		<div>
			{props.bar}
		</div>
	)
)