React Native states not updating value after changing value - ios

Question

I am new to React-Native and its states, here I am stuck with a problem (using dummy data but my problem is same) all I want to achieve is get the latest JSONARRAY fetched from the state, based on button clicks when I click on button one it should only return [{"one":"oneKey"},{"key":"mutatedFruit"}] and similar approach for other buttons as well any help is appreciated
I have attached my
expo snack code here

Answer 1

hope the below code helps ,
import * as React from 'react';
import { Text, View,Button, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
const data = [
{"joinedUsers":[{"one":"oneKey"}],"key":"mango"}
,{"joinedUsers":[{"two":"twoKey"}],"key":"apple"}
,{"joinedUsers":[{"three":"threeKey"}],"key":"banana"}
,{"joinedUsers":[{"four":"fourKey"}],"key":"kiwi"}];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props){
super(props);
this.state={
selectedPosition:0,
valueArr : []
}
}
componentDidMount(){
let newVal = [];
newVal.push(data[0].joinedUsers[0])
newVal.push({"key":"mutatedFruit"})
this.setState({valueArr:newVal})
}
setValues = (position) => {
let newVal = [];
newVal.push(data[position].joinedUsers[0])
newVal.push({"key":"mutatedFruit"})
this.setState({valueArr:newVal})
}
render() {
const value = data[this.state.selectedPosition].joinedUsers
value.push({"key":"mutatedFruit"})
return (
<View style={styles.container}>
<Button title='ONE'
onPress={()=>this.setValues(0)}></Button>
<Button title='TWO'
onPress={()=>this.setValues(1)}></Button>
<Button title='THREE'
onPress={()=>this.setValues(2)}></Button>
<Button title='FOUR'
onPress={()=>this.setValues(3)}></Button>
<Text>{JSON.stringify(this.state.valueArr)}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'column'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

Answer 2

EDIT: Based on your comment, it sounds like your issue is you don't want the same value added multiple times. In that case, this should fix it:
export default class App extends React.Component {
state= {
selectedPosition:0,
}
render() {
const value = data[this.state.selectedPosition].joinedUsers
value[0]["key"] = "mutatedFruit"
return (
<View style={styles.container}>
<Button title='ONE'
onPress={()=>this.setState({selectedPosition:0})}></Button>
<Button title='TWO'
onPress={()=>this.setState({selectedPosition:1})}></Button>
<Button title='THREE'
onPress={()=>this.setState({selectedPosition:2})}></Button>
<Button title='FOUR'
onPress={()=>this.setState({selectedPosition:3})}></Button>
<Text>{JSON.stringify(value)}</Text>
</View>
);
}
}