How to Display value from render dynamic Input fields in react native-CodePudding

I wan to get values when user click on button But my form fields is json that I dynamically created example is here https://snack.expo.dev/@john_marsh/form-data

Textfield

function Text_field(props) {
 return(
   <View key={props.block.keys}>
     <TextInput  
       style={styles.input}
       placeholderTextColor={'black'}
       defaultValue=""
       placeholder={props.block.label}
       type={props.block.type}/>
     {props.children}
   </View>
  );
}

CodePudding user response：

you need to store your value, see controlled input

CodePudding user response：

Try this:

const [respuestas, setRespuestas] = useState([]);
<TextInput
style={styles.input}
placeholderTextColor={'black'}
defaultValue=''
placeholder={props.block.label}
type={props.block.type}
onChangeText={(value) => {
  setRespuestas({ ...respuestas, [props.block.id]: value });
}}
/>

I declare a variable where I'm going to save all the values identified by an id. You will get an Object with the values. You can try saving values and print the object with console.log

CodePudding user response：

Formik

Hey, I would really suggest you use Formik to handle Forms in React Native, it already gives you a lot of tools and helps you take all values from all inputs in a form. Give it a try, refactoring is easy too!

Here are the docs: https://formik.org/docs/guides/react-native