Is the picker being generated on-the-fly?

Exploring the possibilities of React Native and TypeScript, I find myself wondering if it's feasible to dynamically create a picker component. Instead of defining state variables statically like (const [selectedQLType, setQLTypePicker] = useState('');), is there a way to generate these state variables dynamically? This would allow for creating multiple pickers using a map function based on an array of parameters.

import {Picker} from '@react-native-picker/picker';

... const [selectedQLType, setQLTypePicker] = useState('');

  return (
    <View>    
      <Picker
        selectedValue={selectedQLType}
        onValueChange={(itemValue, itemIndex) => setQLTypePicker(itemValue)}>
        {variableType.map(itemIdx => 
          <Picker.Item 
            label={itemIdx} 
            key={itemIdx} 
            value={itemIdx} 
          />)} 
      </Picker>

Answer №1

In the scenario where someone is looking for a solution to a common question, the recommended approach involves developing a component and implementing a method to manage the associated state variable. The function 'setQLTypePicker' should be confined solely within the boundaries of the component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

Issue with decorators not functioning in the latest alpha version of Sequelize v7

As I was exploring sequelize v7 (alpha), I encountered multiple errors when trying out basic examples directly from their documentation. For instance, taken straight from the official documentation import { Sequelize, DataTypes, Model, InferAttributes, Inf ...

Having trouble making Axios work with React JS using the POST method?

I'm a beginner in React and I'm trying to figure out how to save form data to a database using axios. Unfortunately, it's not working for me. Here is my API.JS const axios = require ("axios"); const querystring = require('queryst ...

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

Here we have an HTML code snippet that includes an input file element with Angular: <input type="file" class="btn btn-info" id="archivoPDF" #PDFfile value="Seleccionar PDF(s)" accept="application/pdf" multiple /> And this is the TypeScript code sni ...

Error message: Property is not found in the $rootScope object in AngularJS

Encountering an issue while attempting to assign a value to the rootscope in Typescript. class TestClass{ this.rootScope: ng.IRootScopeService; constructor($rootScope){ this.rootScope = $rootScope; } addValueToRoot=()=>{ ...

Endlessly streaming data is requested through HTTP GET requests

I am facing an issue with my code where it requests data endlessly. The service I have retrieves data in the form of an Array of Objects. My intention is to handle all the HTTP requests, mapping, and subscriptions within the service itself. This is because ...

NestJS mysterious dependencies

I have implemented internationalization in my NestJS project using nestjs-i18n version 8.0.2. Within one of my modules, I have a class with the following constructor: constructor( @InjectRepository(UsersRepository) private readonly use ...

Is there a way to effectively test Apollo Server subscriptions with jest?

While working on integration tests with apollo-testing-library, I found that I could mutate and query but not subscribe and test. Can anyone share any innovative techniques or know how to mock a subscription in Jest? ...

The Microsoft Bing Maps V8 TypeScript library is unable to load: "Microsoft is not recognized."

I'm looking to integrate BingMaps into my React project using TypeScript. After installing the npm bingmaps package, I have included the necessary d.ts file. To import the module, I use the following code: import 'bingmaps'; Within my Com ...

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Hey there, I'm hoping to create a straightforward app that showcases posts. However, I've encountered an issue when deploying the initial page which is stuck on "Loading...". I believe it's a minor problem and would appreciate your assistan ...

The getStaticProps function in Next.js fails to execute, causing an error to appear during the next build process

import { medusa } from "@/app/requests/medusaClient"; import { useState, useEffect, JSXElementConstructor, PromiseLikeOfReactNode, ReactElement, ReactNode, ReactPortal } from "react"; import { Product} from "@/app/models/productMod ...

Class with an undefined function call

Currently, I am working with angular2 and TypeScript where I have defined a class. export class Example{ //.../ const self: all = this; functionToCall(){ //.. Do somerthing } mainFunctionCall(){ somepromise.then(x => self.fu ...

The error that has occurred is: `TypeError: The object on the right side of the 'instanceof' keyword is

Testing my function that verifies if a variable is an instance of a specific type and performs an action has been successful. I conduct the verification using the following code: myCheckingFunction = () => { if (target instanceof H.map.Marker) { ... ...

Is there a way to prevent the background color from filling the entire container?

In the visual representation provided below, there is a header element consisting of a back arrow and a name. The arrow container has been assigned flex: 1, while the arrow and name containers have been set to flex-start and flex-end respectively. This co ...

The Yup Resolver suddenly threw an error indicating that the type was not able to be assigned

I have encountered an error while using @hookform/resolvers version 3.9.0. Here is the code snippet that caused the issue: const form = useForm<FormType>({ defaultValues: { ...defaultFormFieldValues }, resolver: yupResolver(schema), mode: ...

The term "moment" does not have a member called 'default' that can be exported

When attempting to utilize moment.js for changing the local date format in my application, I encountered this error: The library gives an error stating that "moment" does not have an exported member 'default' when importing. Here is the code ...

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm having trouble accessing the fileHandler object from my logger in order to flush the buffer to the file. This is the program I am working with: import * as log from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

What is the best way to filter an array of objects and store the results in a new variable list using typescript?

On the lookout for male objects in this list. list=[ { id: 1, name: "Sam", sex: "M"}, { id: 2, name: "Jane", sex: "F"}, { id: 3, name: "Mark", sex: "M"}, { id: 4, name: "Mary, sex: "F& ...

Throw TypeError: The `pipe` property of `ngrx/store` is undefined during testing

Here is the code snippet from my TypeScript file: this.store.pipe(select(subscribe.getRegCategories)).pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => { if (data && data.length) { this.allRegCategories = data; ...

A step-by-step guide on integrating dynamic components in vue-class-component

After successfully using vue-class-component in my project, I decided to introduce a new component for production only: import store from '../store/Index' let storeTmp = process.env.NODE_ENV === 'production' ? store : null @Component({ ...