React native `input` must be a function received undefined

Question

I have an array which displays a list of jobs with the radio button(each).If I click any radio button I want to get its value so far I'm getting an error input must be a function received undefined. how can I achieve something like this in react native?

Code

import React, {useState} from 'react';
import {View, Text, TextInput, Image,Button,Body,Pressable,ScrollView,Switch} from 'react-native';



export default function Home({ navigation}){
  let roles = navigation.getParam('roles')
 const [isEnabled, setIsEnabled] = useState(false);
    const toggleSwitch = () => setIsEnabled(previousState => !previousState);

    const handleClick = (data, e) => {
        alert(e.target.value, data);
    }


<View>
             {
                 Object.keys(roles).map((key) => {
                    return (
                        <View>
                            <View style={styles.XYQHC}>
                                 <Text>{roles[key]['name']}</Text>
                            <Switch
                            trackColor={{ false: "#767577", true: "#81b0ff" }}
                            thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
                            ios_backgroundColor="#3e3e3e"
                            onValueChange={toggleSwitch}
                            value={isEnabled}
                        />
                           
                           <input type="radio" name="roles" value={roles[key]['name']} defaultChecked={roles[key]['id'] == 3 ? true : false  } onClick={handleClick.bind(this, roles[key]['name'])}/>

                            </View>
                        </View>
                    )
                
                     })
             }
            </View>
};

Answer 1

I had to edit a little bit to make it work and to assume some input data but here is a working example of your code:

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

function RadioButton({ label, onPress, selected, style }) {
  return (
    <TouchableOpacity
      style={[
        {
          flexDirection: 'row',
          alignItems: 'center',
          marginLeft: 12,
          marginVertical: 20,
        },
        style,
      ]}
      onPress={onPress}>
      <View
        style={{
          height: 24,
          width: 24,
          borderRadius: 12,
          borderWidth: 2,
          borderColor: '#000',
          alignItems: 'center',
          justifyContent: 'center',
          marginRight: 12,
        }}>
        {selected ? (
          <View
            style={{
              height: 12,
              width: 12,
              borderRadius: 6,
              backgroundColor: '#000',
            }}
          />
        ) : null}
      </View>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
}

export default function Home({ navigation }) {
  // let status = navigation.getParam('status');
  let status = 2;

  // let roles = navigation.getParam('roles');
  let roles = [
    {
      id: 1,
      name: 'lawyer',
    },
    {
      id: 2,
      name: 'farmer',
    },
    {
      id: 3,
      name: 'architect',
    },
  ];
  const [isEnabled, setIsEnabled] = useState(false);
  const [chosenRole, setChosenRole] = useState(false);

  useEffect(() => {
    roles.find((role) => {
      if (role.id === status) {
        setChosenRole(role);
        return true;
      }
      return false;
    });
  }, []);

  const handleClick = (data) => {
    console.log(data);
    setChosenRole(data);
  };

  return (
    <View style={{ marginTop: 30 }}>
      {roles.map((role) => {
        return (
          <View>
            <RadioButton
              label={role.name}
              selected={role.name === chosenRole.name}
              onPress={() => handleClick(role)}
            />
          </View>
        );
      })}
    </View>
  );
}