So, I'm just playing with react-native to learn:
<TouchableOpacity style={styles.touchables} onPress={handleArithmetic}>
<Text style={{ color: 'white' }}> Increase by 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={handleArithmetic}>
<Text style={{ color: 'white' }}> Decrement by 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={handleArithmetic}>
<Text style={{ color: 'white' }}> Multiple by 4</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={handleArithmetic}>
<Text style={{ color: 'white' }}> Divide by 4</Text>
</TouchableOpacity>
I got these badboys, instead of having four inline or outer functions for arithmetic operations, i wanted to do something like this:
const handleArithmetics = (e) => {
switch (e.target.name) {
case 'INCREMENT':
break;
case 'DECREMENT':
break;
default:
break;
}
};
Remember this? I've done this a lot in react.js while web programming, say there's user related form.
setUser([e(which is just an html input element with name tag on it).target.name] = e.target.value)
how can I reach this on react-native, should I dive into the props into react library, or is there a way to accomplish?
Unfortunately not, RN components do not have 'name' tags. There is a workaround if you assign testIDs:
<Pressable testID='hi!!!!' onPress={(e) => console.log(e._targetInst.memoizedProps.testID)}>
<View style={{ width: 40, height: 40, backgroundColor: '#faf' }} />
</Pressable>
but this uses private React Native internals and I don't recommend this. You should probably do it the long way:
const [counter, setCounter] = useState(0);
const handleArithmetics = (amountToAdd) => {
setCounter(counter => counter + amountToAdd);
};
...
<TouchableOpacity style={styles.touchables} onPress={() => handleArithmetic(1)}>
<Text style={{ color: 'white' }}>Increment by 1</Text>
</TouchableOpacity>
so unlike web, you cant access it like that, what you can do is
<TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("inc")}>
<Text style={{ color: 'white' }}> Increase by 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("dec")}>
<Text style={{ color: 'white' }}> Decrement by 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("mul")}>
<Text style={{ color: 'white' }}> Multiple by 4</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("div")}>
<Text style={{ color: 'white' }}> Divide by 4</Text>
</TouchableOpacity>
So after this you can do something like
const handleArithmetics = (param) => {
switch (param) {
case 'inc':
break;
case 'dec':
break;
case 'mul':
break;
case 'div':
break;
default:
break;
}
};
Thats it, it should do. Do lemme know in case of any doubts