I want to take user input and update my bar chart according to the Y-axis value the user inputs. However, my function updateArray currently is updating the bar chart. Any ideas?
import React, { useState, useEffect } from 'react'; import { View, StyleSheet, Dimensions, Text, TextInput, TouchableOpacity } from 'react-native'; import { BarChart, Grid } from 'react-native-svg-charts' export default function App() { const fill = 'rgb(134, 65, 244)' const data = [50,10] const [newData, setnewData] = useState(null) useEffect(() => { }) const updateArray = () => { data.concat(newData) } return ( <View> <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}> <Grid /> </BarChart> <TextInput style={styles.textArea} underlineColorAndroid="transparent" numberOfLines={1} autoCapitalize="none" value={newData} onChangeText={(newData) => setnewData(newData)} /> <TouchableOpacity style={styles.buttons} onPress={updateArray}> <Text>Apply</Text> </TouchableOpacity> </View> ) }
Advertisement
Answer
Put your data in state. then update your state.
import React, { useState, useEffect } from 'react'; import { View, StyleSheet, Dimensions, Text, TextInput, TouchableOpacity } from 'react-native'; import { BarChart, Grid } from 'react-native-svg-charts' export default function App() { const fill = 'rgb(134, 65, 244)' const [data, setData] = useState([50,10]) const [newData, setnewData] = useState(null) useEffect(() => { }) const updateArray = () => { data.concat(newData) } const updateArray = useCallback(()=>{ setData(data => data.conncat(newData)) }, [setData, newData]) return ( <View> <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}> <Grid /> </BarChart> <TextInput style={styles.textArea} underlineColorAndroid="transparent" numberOfLines={1} autoCapitalize="none" value={newData} onChangeText={(newData) => setnewData(newData)} /> <TouchableOpacity style={styles.buttons} onPress={updateArray}> <Text>Apply</Text> </TouchableOpacity> </View> ) }