Skip to content
Advertisement

Attempting to concat user input to array – react native

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>
        )
    }
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement