Display inputText according to the quantity selected in the React-Native Picker

Question

I have the following problem.

I have a Piker jam with quantity and I want from the quantity selection I get the same Textinput number defined by the quantity selection.

Component Quantity:

import React, { useState } from "react";
import { Picker, View } from "react-native";


export default function Pic() {
  const [selectedValue, setSelectedValue] = useState("Selecionar");
  return (
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: '100%'}}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Selecionar:" value="" />
        <Picker.Item label="1" value={1}/>
        <Picker.Item label="2" value={2}/>
        <Picker.Item label="3" value={3}/>
        <Picker.Item label="4" value={4}/>
        <Picker.Item label="5" value={5}/>
        <Picker.Item label="6" value={6}/>
        <Picker.Item label="7" value={7}/>
        <Picker.Item label="8" value={8}/>
      </Picker>


  );
}

Textinput component:

    import React from 'react'
import { View, TextInput, StyleSheet } from 'react-native'


export default props => {
    const [value, onChangeText] = React.useState('Digite aqui...');

    return (
        <View style={[styles.container, props.style]}>
            <TextInput onChangeText={text => onChangeText(text)}
      value={value} style={styles.input} />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '90%',
        height: 40,
        backgroundColor: '#EEE',
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 15,
        marginLeft: 20,
    },
    input: {
        width: '70%',
        
    }
})

Answer 1

You can create an array from the selected quantity in your Picker and this array returns to you Textinput’s. More or less like this:

export default function Screen() {
  const [selectedValue, setSelectedValue] = useState(0);
  return (
    <View>
      // ... Picker
      {new Array(selectedValue).map(() => (
        <TextInput />
      ))}
    </View>
  );
}

Remember that the state that you create within your custom component is unique to the component, you will not be able to access it from the screen that "holds" it. The same goes for your Quantity component, so in the example I did, the state of the Quantity component would be on the screen and not on the component.