Onpress method does not work in React Native?

Issue

I am getting an error that I do not understand when using the useState and useSetState functions that I sent as prop to the component I created.

Here is the main component which the CalcButton placed:

export const Calculator = () => {
  const [operationText, setOperationText] = React.useState('');
  const [operationHistory, setOperationHistory] = React.useState([]);

  return (
    <SafeAreaView>
           <CalcButton operationText={operationText}  setOperationText={setOperationText}  />
    </SafeAreaView>
  );
};

Calcbutton.tsx Component

export default function CalcButton(
  operationText,
  setOperationText,

) {
  const handleClick = () => {
    setOperationText('2')
};

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handleClick} style={styles.inner}>
        <View style={styles.middleInner}>
          <Text style={styles.label}>=</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}
[enter image description here][1]

When I click CalcButton it gives that error.

https://i.stack.imgur.com/FFfYl.png

Thanks for all helps!

Solution

In CalcButton component I added curly braces to my props and it works

export default function CalcButton(
  {operationText,
  setOperationText}

) {
  const handleClick = () => {
    setOperationText('2')
};

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handleClick} style={styles.inner}>
        <View style={styles.middleInner}>
          <Text style={styles.label}>=</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

Answered By – Oğuzhan Şenokur

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *