Add values in array using React-native

1. Below Are The Lines Of Source Code Of React-Native

import { StyleSheet, Text, View, Alert, TouchableOpacity, ScrollView, Platform, TextInput } from 'react-native';
import React, { Component } from 'react';
class Practice extends React.Component {
    constructor(props) {
        super(props);
        this.collection = [
            { carBrand: 'suzuki', carName: 'Baleno' },
            { carBrand: 'tata', carName: 'Nexon' }
        ],
            this.arr = [];
        this.state = {
            name: '',
            forAdd: []
        }
    }
    addfn() {
        
        this.arr.push(String(this.state.name))
        this.setState({
            forAdd: this.arr
        })
    }
    render() {
        
        return (
            <View style={styles.MainContainer}>
                {
                    this.collection.map((item, key) => (
                        <View style={{ justifyContent: 'space-around', alignContent: 'center' }} key={key}>
                            <TouchableOpacity>
                                <Text style={styles.TextStyle}>{item.carBrand}</Text>
                                <Text style={styles.TextStyle}>{item.carName}</Text>
                            </TouchableOpacity>
                        </View>
                    ))
                }
                <Text>Length Of Array :{this.collection.length}</Text>
                <View style={{ justifyContent: 'center' }}>
                    <Text style={styles.TextStyle}>Name : {
                        this.arr.map((item, key) => {
                            return item + ","
                        })
                    } </Text>
                </View>
               
                <TextInput
                    placeholder='Enter Name...'
                    onChangeText={(text) => { this.setState({ name: text }) }}
                    style={{ borderWidth: 2, borderRadius: 2, borderColor: '#000', width: 300, height: 40 }}
                />
                <TouchableOpacity onPress={() => {
                    this.addfn()
                }}>
                    <Text style={styles.TextStyle}>Add Name</Text>
                </TouchableOpacity>
                <Text style={styles.TextStyle}>{this.state.name}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    MainContainer: {
        flex: 1,
        margin: 10,
        paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
        justifyContent: 'space-around',
        alignContent: 'center',
        alignItems: 'center'
    },
    TextStyle: {
        fontSize: 20,
    }
});
export default Practice;