1,302 questions
0
votes
2
answers
98
views
Why does my debounce function not work correctly inside a component? [duplicate]
I'm trying to implement a debounce function in a React component to prevent multiple API calls while the user types in a search input field.
Here’s the debounce function I'm using:
function debounce(...
1
vote
1
answer
109
views
How can I customize the default sorting behavior in a PrimeReact DataTable?
I want to enable sorting with null values in PrimeReact. Currently, null values are always placed at the bottom by default, similar to Excel's behavior.
Previously, sorting was working as shown in ...
- 792
1
vote
2
answers
89
views
How can I customize the sort icon color for specific columns in a PrimeReact table with multi-sort enabled?
I am using a PrimeReact table with multi-sort functionality, and I need to change the color of the sort icons for specific columns. Specifically, I want the sort icon in the Code column to be red and ...
- 792
0
votes
1
answer
124
views
Why aren't defaultProps applied to my React functional component?
I'm working on a React project and attempting to use defaultProps with a functional component. However, when I don't explicitly pass props, the default values are not being applied.
Course component:
...
0
votes
0
answers
61
views
Typescript Type Inference Using a Boolean Property and Discriminating Unions
What happens inside of a React Functional Component that affects type narrowing?
type SelectField =
| {
multi?: false;
value?: string;
}
| {
multi: true;
value?: (...
1
vote
1
answer
99
views
How to pass key to React functional component inside .map()?
I have faced a typical problem of React must be having 'key prop for each child' inside .map() method.
I have tried to make a key inside a functional component, like...
export default function ...
- 13
-1
votes
2
answers
95
views
How to pass a component and state value in React to render conditional data based on user selection?
I am working on a React project where I have two components, UserRules (Component A) and UserEmail (Component B). I need to pass the value of a state variable selectedVoucherOption from Component A to ...
- 1,517
1
vote
1
answer
90
views
Converting and using a class component with functions to a functional component in React?
For context, I'm trying to make a project using the html canvas in React. I am trying to replace the class components with functional components for uniformity and avoiding mixing of class and ...
- 161
-1
votes
1
answer
54
views
How react functional component works? [duplicate]
Can someone explain the difference in calling a JSX Element as component and as function in react?
These are my functions.
Case-1: as a function
const MyFunction = () => {
return (
<div>...
0
votes
0
answers
75
views
React State Update Not Reflecting Immediately in Conditional Rendering
I am working on a React component where I need to select an item from a list and update the state with the selected item's ID. I then want to conditionally render the selected item. However, I am ...
1
vote
1
answer
53
views
Functions not using most recent state in React functional component
I am converting a class component to a functional component but I am having an issue where state values from useState are not the most recent values inside a another function. Because the functions ...
0
votes
1
answer
39
views
UNSAFE_componentWillReceiveProps(nextProps) in functional component
I have a class based component as below:
class NeedsApprovalEditTransactionInfoContainer extends React.Component {
UNSAFE_componentWillReceiveProps(nextProps) {
if (
nextProps....
- 13
0
votes
1
answer
28
views
labels customisation in line chart using highcharts
I am using line chart, where I have added plot bands ranges. I want to return those labels of y-axis which are present in plot bands.
labels: {
formatter: function () {
if ([-12, -10, 0.0, 6.5, 10, 20]...
1
vote
0
answers
158
views
How to implement a linkedlist using Typescript in a functional component in React?
I'm currently learning data structures on my own. Most websites provide an implementation using classes and I'm unable to find an implementation using functions for functional components.
I want to ...
- 13
2
votes
1
answer
396
views
How to transform a class component to a functional component in SPFx React.js and get value from a SharePoint list
I have a written a class component in SPFx with the pnp/js framework and React.js. I need to transform it to a functional component in react. I'm struggeling to call my SharePoint lists now.
I have a ...
- 49
0
votes
1
answer
234
views
Is it possible to define a specific type for React Node children (and their props)?
If I have a functional component...
const MyParent = (props:MyParentProps)=>{
etc...
}
...is it possible in Typescript to define that all children must adhere to a specific type or interface? ...
- 63
1
vote
1
answer
112
views
How to redirect to specific route when first route is matched in react router-dom v6 [duplicate]
In my current application, there's a route like this: "http://localhost:3000/:productId/productInfo". The :productId part is dynamic, meaning it can be anything. Users are redirected to the ...
- 792
-1
votes
1
answer
109
views
Passing Props from a Functional component to a class component
I am doing a React tutorial and author has a playground where everything works. But in my IDE when I try to pass props to a class component, the component does not recognize the props. I have been at ...
- 491
0
votes
1
answer
252
views
How to test for uniqueness of value in array in Yup?
I have created a dynamic form with validation in React with Formik.
What I have achieved so far:
Current code allows users to selecting the number of tickets to purchase and then entering the name and ...
- 792
0
votes
0
answers
897
views
Uncaught TypeError: setImmediate is not a function
I am using a React TextEditor package React Draft Wysiwyg.
Here is the implementation.
export default function TextEditor() {
const [editorState, setEditorState] = useState(() =>
...
1
vote
1
answer
492
views
Objects are not valid as a React child (found: object with keys {type, props}). If you meant to render a collection of children, use an array instead
I am trying to implement React.createElement().But I am getting following error
Uncaught Error: Objects are not valid as a React child (found: object with keys {type, props}). If you meant to render ...
- 37
0
votes
1
answer
594
views
Parent component unnecessarily re-renders all children when passing a ref to child nodes
I have the following use-case:
Component A is a memoized (React.memo) component whose ref is being forwarded (React.forwardRef).
Component B is a memoized component (React.memo) that renders multiple ...
- 2,374
0
votes
1
answer
73
views
Getting Uncaught Exception TypeError: handleFilter is not a function when running the test case in react
I am passing a parameter from child functional component to parent component. The value gets passed successfully, but when i run the test cases I get the error TypeError: handleFilter is not a ...
0
votes
1
answer
72
views
How can I use Hooks in Non-Functional Components
import { AES, enc, mode, pad } from "react-native-crypto-js";
import Constants from "expo-constants";
import axios from "axios";
import * as Device from 'expo-device';
...
- 67
0
votes
0
answers
212
views
Maintaining Layout of Percentage-Based Children in React Native Reanimated Wrapper
I'm working on a wrapper component that should animate child components using React Native Reanimated.
My current approach is to clone each child and wrap it into a Animated.View.
export function ...
- 23
0
votes
2
answers
153
views
React state value is wrong in functional component when read from event handler
I am trying to convert a fairly simple React class component to functional component. Here on document click I want to toggle the isShown boolean value between true and false. But each time onClick is ...
- 1,447
0
votes
1
answer
457
views
How do I render a component with the value of a state variable which is incremented with each render?
I have a component in my React App.
I am looking to render this component repeatedly a number of times. The component has a className, which I want to set for each component with the value of the '...
- 23
-1
votes
1
answer
112
views
How to use same function in two components where in 1st component, one parameter is an dto and in a second component, its dto array, in React
In React.js I have a function which receives two parameters (id: string, User: UserDto), I want to use this function in two different components, on a first components, it works fine but on a second ...
- 29
1
vote
0
answers
468
views
handle validation on child component for the the form in the parent component the react-hook-form and usefieldarray
I'm new to react and i'm stuck in a situation. The application i'm currently working on has multiple sections say section 1 ,section 2, ... Each of these section have form which has different fields. ...
- 101
0
votes
1
answer
30
views
React_Access to state array
I need to update state of my array order conditionally (checking for duplicates), but can't access order values inside function addToBasket.
At the same time it's updated and I have an access there in ...
- 307
1
vote
0
answers
97
views
App Intro Slider with checkable inputs on pages - calling actions from parent, sending events to childrens
I'm struggling with this problem from two weeks and I'm here to search help.
I cannot figure out how to make a Horizontal Page Slider in ReactNative, in order to avoid useless rerender of all the ...
- 355
0
votes
0
answers
203
views
Class component bind vs. function component useCallback
For comparison purpose I wrote same logic as class vs. function component, and noticed some behavioral differences.
Class component with bind:
this.logName = this.logName.bind(this);
then function ...
- 4,180
1
vote
1
answer
144
views
Class components referencing and setting their own static variables - what is the functional component equivalent?
When using class components, I am able to set static variables that will persist on each further instance of the class. This allows me to set a kind of firstRun state on a component, even when calling ...
user10650826
0
votes
2
answers
41
views
how to call a function that is received as prop in functional component in react?
I am trying to call toggleSideBar received in SideBar component as a prop. But it is giving an error that toggleSideBar is not a function. Actually I am trying to call toggleSideBar in another ...
0
votes
1
answer
328
views
series.setData in highcharts and setChartOptions is not working in ReactJS
Now, As I previously discussed my issue with scatter chart (Inconsistent Data Points in HighCharts Scatter Plot with ReactJS) is we can't update data directly using setState method like other types in ...
- 792
2
votes
1
answer
93
views
How to declare functional component with generic props as a constant
This is how you would define a React component that accepts a generic type in its props:
type Props<T> {
data: T;
}
export const MyComponent = <T,>(props: Props<T>) => {
...
- 27.5k
0
votes
2
answers
120
views
React Native doesn't respect the function scope
I am developing a react-native app. Recently, I encountered a strange behavior of functional components. Typically, I break large component into smaller components, write separate logic for each ...
- 3
1
vote
1
answer
162
views
Inconsistent Data Points in HighCharts Scatter Plot with ReactJS
Previousy, I was using line charts. but now, I want multiple data points on same X-Axis with tooltip, and according to HighCharts behaviour -
"In a line chart, by default, Highcharts will display ...
- 792
0
votes
1
answer
218
views
MUI: You have provided an out-of-range value `[object Object]` for the select component
I am trying to make a custom Select component with single or multi select feature
so I am initiating components like below
const vendorList = [
{
label: "John",
value: "668&...
- 2,571
1
vote
1
answer
1k
views
How to Highlight colour of specific row in Data table in Prime React
I want to highlight colour of row which have the username "Bret".
Something like this => https://yourimageshare.com/ib/AxZUw6Vuo0
I have searched about this and tried with rowClassName,...
- 792
0
votes
0
answers
59
views
Typescript arrow function object with new key won't give any errors
In my typescript code I'm not getting any errors when I use the new keyword to create an Arrow function object. now i know according to the documentation, You can not use new keyword to create an ...
- 1,040
1
vote
2
answers
366
views
why onClick event not working even after removing the disable attribute
Please ignore the 'if' condition, below is just an example. my requirement is to work with useRef for enabling and disabling a button based on certain condition. In below code onClick functionality ...
- 11
-1
votes
1
answer
15
views
I have encountered an issue with managing state updates effectively
I'm working on a React project and using functional components with hooks. I have encountered an issue with managing state updates effectively. Let's say I have a component like this:
import React, {...
0
votes
1
answer
91
views
React dynamic component cannot access prop function
I am trying to access a prop function within a child component which ultimately changes a state within a parent component. Here is how it works:
parent.tsx
const initialData = {
spanish: ""...
- 196
-1
votes
2
answers
125
views
Why is my functional component being called multiple times?
I'm trying to create this webpage with a table of users data. For some reason the table component is being called multiple times and I'm not able to figure out why.
import React, { useState, useEffect ...
- 61
1
vote
0
answers
90
views
Behaviour of event object when the onchange handler of a controlled react component is asynchronous
function Test(){
async function changer(ev:any){
let a=10;
console.log(ev.target.value) // reads correct updated state value
await chrome.storage.sync.get("sync") //---> fails to update ...
- 11
0
votes
1
answer
269
views
React functional component behaviour question
I'm starting to learn React and its components, specifically the functional components.
While playing around with the code i found out a particular behavior that left me with a doubt/question. I'm ...
0
votes
1
answer
394
views
Parent state getting reset back to initial value after different child is clicked
I have a parent and child components. Whenever the Link in the child component is clicked, I want to execute the parent's click handler that is passed in as props. In the click handler, I simply want ...
- 143
1
vote
0
answers
16
views
unable to set the state of an array of objects of a functional component using the setState hook in react
I have a piece of code wherein I am trying to change the state of an array of objects (I want to clear it out) when certain conditions are met. The conditions I have written are correct but I am ...
- 13
2
votes
1
answer
2k
views
React extends for function component?
I have a class component that extends another class component:
export default class MyLittleComponent extends TheBigBoy
Now I need to refactor MyLittleComponent to functional component so it works ...
- 7,563