const FormData = ({ dataArray }: object[]): JSX.Element => {
console.log("Array of Objects",dataArray)
//This is a large form component....
});
The dataArray contains multiple objects, how can I specify a specific type for these components instead of using object?
You have multiple options to accomplish this:
import React, { FC } from 'react'
type Obj = {
name: string
}
type Props = {
arrayValue: Obj[]
}
const Form: FC<Props> = ({ arrayValue }) => {
console.log("Array of Obj", arrayValue)
const x = arrayValue[0].name // okay
return <div></div>;
//This is a large form component....
};
// OR A GENERIC APPROACH
const Form2 = <T>({ arrayValue }: { arrayValue: T[] }) => {
console.log("Array of Obj", arrayValue)
return <div></div>;
//This is a large form component....
};
type Obj2 = { age: number }
Please note, the generic approach has its own limitations. You cannot access properties of specific elements in the array, but you can impose certain restrictions (bounds) on the T argument.
For instance:
const Form2 = <T extends { age: number }>({ arrayValue }: { arrayValue: T[] }) => {
console.log("Array of Obj", arrayValue)
arrayValue[0].age // okay
return <div></div>;
//This is a large form component....
};
type Obj2 = { age: number }
const result = <Form2<Obj2> arrayValue={[{ age: '42' }]} /> // error, because age should be a number
Imagine having a unique object array named itemArray with two items inside; { "totalItems": 2, "items": [ { "id": 1, "name": "dog" }, { "id": 2, "name": "cat" }, ] } If you receive an updated result for on ...
I am currently using react-router-dom in my project, but I am still relatively new to it. I have encountered an issue regarding page navigation. Below is the code for my App.js: class App extends Component { render() { return ( <div classN ...
When I try to run npm run start in the terminal, an error message appears. 'Redirect' is not exported from 'react-router-dom', causing an import error. I have attempted various solutions like reinstalling node_modules, react-router-d ...
I've been pondering about the best way to redirect to a specific site while including query parameters in the URL. <input id="query" name="query" placeholder="Search" type="input" > I have experimented wi ...
Feeling a bit rusty at the moment; I have a few promises remaining that require access to a previous class, and I am striving to find the most elegant solution. Utilizing webdriverJS, this should cover all aspects of the driver... Thank you for your assis ...
This form is where I craft my questions https://i.sstatic.net/93781.png When composing a question, the ability to include multiple alternatives is available. There will also be an option to edit these alternatives. The desired format for my array is as ...
I am currently working on implementing the bubblesort algorithm using ReactJS. My state includes an array of 3 objects initially sorted in descending order by the 'num' property. I have a button on my interface that triggers the bubblesort functi ...
Is there a way to properly sort a JSON array in Angular? Here is the array for reference: {"title":"DEASDFS","Id":11}, {"title":"AASDBSC","Id":2}, {"title":"JDADKL","Id":6}, {"title":"MDASDNO","Id":3}, {"title":"GHFASDI","Id":15}, {"title":"HASDFAI","Id": ...
Even though this topic has been covered before, I have not found any satisfactory solutions. Here is my approach: play.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impor ...
Having a strange issue with my simple component. I've imported DataGrid from MaterialUI, defined variables for columns and rows, and rendered the DataGrid in a functional component. However, I'm getting an "invalid hook call" error. Most solution ...
My attempt to use @keydown resulted in an error: Type 'Event | KeyboardEvent' is not assignable to type 'KeyboardEvent'. Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, c ...
Trying to center an absolutely positioned object horizontally using CSS and jQuery is proving to be a challenge. The use of jQuery is necessary due to the varying widths of the objects. Hover over the icons in my jsFiddle to see the issue. Check out the j ...
In the past, I have experience working with i18next to load translations from static json files. However, for my current project, I need to load all translations from an API. How can I achieve this? Additionally, how can I implement changing the translat ...
I encountered a problem for which I couldn't find an immediate solution. I have an array of objects representing products, with each product having a category property. My goal is to group these products by their categories. After some trial and error ...
After serializing a JS form, the data looks like this: .....&xx=xxx&otherError=&input=SMS&message=sdfgs&...... Can anyone provide guidance on how to replace the value of message with the content of a textarea before making an ajax cal ...
Describing my current issue is proving to be challenging, but I'll do my best: My project involves creating an SVG circle progress bar and fortunately, I came across a great example that aligns with what I aim to achieve. I prefer not to use any thir ...
My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...
I am working with JSON data that is dynamically generated by SimpleXML from an XML file: "{"description":"Testing","site":"http:\/\/localhost","steps":{"step":[{"command":"grabimage","parameter":"img[alt=\"Next\"]"},{"command":"click", ...
While my dropdown works flawlessly on a desktop browser, I encountered an issue when accessing it on an Android device. The dropdown immediately disappears and the virtual keyboard pops up, which is not the case on iOS devices. I suspect that the problem ...
function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...