Display react-native components array

One great way of creating an array of components is creating an array of data and using a map to transform them into components. This also avoids duplicating code.

To do this is easy:

    const form = ['First Name', 'Last Name', 'Phone', 'Email', 'Etc']
    const textInputComponents = form.map(type => <TextInput placeholder={type} />)

Them on render or return: call the array of components you just created:

    render(){
        <>{textInputComponents}</>
    }

This is especially useful if your form/array is big, and you can even use it with an array of objects.


Your code is fine but you are doing one extra thing which is joining the array. You don't have to do that.

render()
{
 var CompArray = new Array();
 CompArray[0] = <TextInput placeholder="First Name"/>
 CompArray[1] = <TextInput placeholder="Last Name"/>
 return(<View>{CompArray}</View>);
 }

Tags:

React Native