Search code examples
reactjsreact-nativemetro-bundler

TypeError: undefined is not an object (evaluating '_ref.painLevelColor')

I have a functional component in react native which is receiving its parent state as props.

const PainLevel = ({painLevelColor = 'green', setPainLevelColor}) => {...}

parent:

const BodyParts = () => {
  const [side, setSide] = useState('Front');
  const [painLevelColor, setPainLevelColor] = useState('#43BA08');
return(
      {...}
      <PainLevel
        painLevelColor={painLevelColor}
        setPainLevelColor={setPainLevelColor}
      />
  );
};

It's working fine when both are in the same file but when I move my child component into my components folder it's throwing this error TypeError: undefined is not an object (evaluating '_ref.painLevelColor')

I have not set the base of the project and have no idea what is causing this

any Idea?

Solution

  • You should provide more information, imports and content of the child entity.

    But from the error and situation you described, I guess that you should have circular dependency. You may have used parent and child in each other and it causes imported values to be undefined. It doesn't happen when they are in same file.

    You can read more about circular dependency and ways to solve it here:

    https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de