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)