no-var-name-same-as-state-property.md

no-var-name-same-as-state-property (no-var-name-same-as-state-property)

This rule warns about a Mitosis limitation.

Rule Details

This rule aims to warn you if you declare a variable with the same name as a state property.

Examples of incorrect code for this rule:

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  const foo = bar;

  return <div />;
}

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',

    abc() {
      const foo = 'baz';

      return foo;
    },
  });

  return <div />;
}

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const foo = 'some value';
    state.foo = foo;
  }

  return <div />;
}

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const { foo } = props.obj;

    state.foo = foo;
  }

  return <div />;
}

Examples of correct code for this rule:

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  const foo_ = bar;

  return <div />;
}

import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    foo: 'bar',
  });

  function myFunction() {
    const { foo: foo1 } = props.obj;

    state.foo = foo;
  }

  return <div />;
}