Display react-native components array

Question

I have an array of react native components and would like to display them all at once in a View however I keep getting the error

RawText [object object] must be wrapped in an explicit Component

and displaying it in a Text will not get the desired result, how do I go about it.

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

var Components = CompArray.join();

return(<View>{Components}</View>);
}

Answer 1

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.

Answer 2

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>);
 }