Quantcast
Channel: Hot Weekly Questions - Web Applications Stack Exchange
Viewing all articles
Browse latest Browse all 9782

React native form with radio buttons using react-hook-form [closed]

$
0
0

I'am working on a react native project and I'am trying to register a form with radio buttons with react-hook-form library. But the defaultValues object of useForm() don't take into account the state update of radio value however I console.log the state and the update works Here the full code:

import React, { useState } from "react";import { useForm, Controller } from "react-hook-form";import { Radio } from "native-base";const myForm = () => {  //Create an array of all items  const itemsTab = [    {      label: "item 1",      value: "1",    },    {      label: "item 2",      value: "2",    },    {      label: "item 3",      value: "3",    },  ];  const [itemChecked, setItemChecked] = useState("");  const { handleSubmit, control, reset } = useForm({    defaultValues: { itemValue: itemChecked },  });  const submitForm = values => {    console.log(values);  };  console.log(`ok: ${itemChecked}`);  return (<View>      {/* title */}<Text>list of items</Text>      {/* radio buttons */}      {itemsTab.map((item, index) => {        const { label } = item;        return (<View key={index}><TouchableOpacity onPress={() => setItemChecked(value)}><View style={styles.radioBox}><Controller                  name="itemValue"                  control={control}                  as={<Radio                      //   name="itemValue"                      selected={itemChecked === item.value}                      color="rgba(0,0,0,.5)"                      selectedColor=red                    />                  }                /><Text>{label}</Text></View></TouchableOpacity>            {/* submit button */}<TouchableOpacity              onPress={handleSubmit(submitForm)}><Text>                submit</Text></TouchableOpacity></View>        );      })}</View>  );};

Viewing all articles
Browse latest Browse all 9782

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>