React Native doesn't respect the function scope

Question

I am developing a react-native app. Recently, I encountered a strange behavior of functional components. Typically, I break large component into smaller components, write separate logic for each smaller component, and then call them in the same component.

In the below code, I have not defined the method onPressed in the SmallComponentB but when I click on this it calls the method from SmallComponentA

const SmallComponentA = ({}) => {

    onPressed = () => alert('Clicked A')

    return <Text onPress={onPressed} >Press On A</Text>
}

const SmallComponentB = ({}) => {
    return <Text onPress={onPressed} >Press On B</Text>
}

const ActualComponent = ({}) => {
    return(
        <>
        <SmallComponentA />
        <SmallComponentB />
        </>
    )
}

That's because you are creating a global variable. You must be using sloppy mode (as opposed to strict). Change your code const onPressed = () => alert('Clicked A')and you'll get the expected behavior. — Ruan Mendes
– Ruan Mendes, Commented Sep 22, 2023 at 6:40

Nensi Kardani · Accepted Answer · 2023-09-22 09:37:06Z

-1

You can do it both ways, either it's a separate function in each or it should be a common function

With Separate:

    const SmallComponentA = ({}) => {
        const onPressed = () => alert('Clicked A')
    
        return <Text onPress={onPressed} >Press On A</Text>
    }
    
    const SmallComponentB = ({}) => {
        const onPressed = () => alert('Clicked B')
    
        return <Text onPress={onPressed} >Press On B</Text>
    }
    
    const ActualComponent = ({}) => {
        return(
            <>
            <SmallComponentA />
            <SmallComponentB />
            </>
        )
    }

Common Function:

    const onPressed = ( component ) => alert('Common Clicked '+ component);
    
    const SmallComponentA = ({}) => {
      return <Text onPress={()=>onPressed("A")}>Press On A</Text>;
    };
    
    const SmallComponentB = ({}) => {
      return <Text onPress={()=>onPressed("B")}>Press On B</Text>;
    };
    
    const ActualComponent = ({}) => {
      return (
        <>
          <SmallComponentA />
          <SmallComponentB />
        </>
      );
    };

Hope it will hep you!

edited Sep 22, 2023 at 9:37

answered Sep 22, 2023 at 8:57

Nensi Kardani

2,4207 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashish Over a year ago

Yes, by adding a const keyword it works fine. For your second approach - We should avoid an arrow function inside the render method because the arrow function returns a new function every time. This causes React to think something has changed in our view, when in fact nothing has.

Bala Vigness · Accepted Answer · 2023-09-22 08:32:21Z

-1

So you can individually set the onPressed function inside each of the individual arrow function like,

const SmallComponentA = ({}) => {
    const onPressed = () => alert('Clicked A');

    return <Text onPress={onPressed}>Press On A</Text>;
}

const SmallComponentB = ({}) => {
    const onPressed = () => alert('Clicked B');

    return <Text onPress={onPressed}>Press On B</Text>;
}

const ActualComponent = ({}) => {
    return (
        <>
            <SmallComponentA />
            <SmallComponentB />
        </>
    );
}

answered Sep 22, 2023 at 8:32

Bala Vigness

4671 gold badge4 silver badges10 bronze badges

Collectives™ on Stack Overflow

React Native doesn't respect the function scope

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related