I need to convert the given class component into a functional one. I’m working with outputting an array of multiple Editors draft-js and I’m having some trouble outputting them. On the internet, I found a working class component with an array of them, but I can’t convert it into a functional…
Tag: react-functional-component
On an onClick event in a React function component, should I pass a function by reference or make an anonymous function?
I found this question but it doesn’t answer my specific case, because the answers are old, don’t answer all my questions in this post and in that case they only pass the event variable to the function, but in my case I might want to pass a different type of value, like a string: React performance:…
Array of Functional Components doesn’t append props content as expected
I want to add an array of <TokenFeed/> functional components to the <Feeds/> component. The problem is that when I do, the onClick() event that passes some text to my <App/> doesn’t work as expected. The array version of <TokenFeed/> when clicked, will replace my <input/> t…
How do I pass data between React Functional Components?
Currently, I am trying to pass a specific piece of data, the user’s name, from one functional component, the <User/> component, to another, the <Profile /> component, when the user navigates to a certain page. Here is my code: User.js UsersList.js Feed.js App.js And here is the current <P…
Getting undefined props in functional react components
How to pass the {requests} prop to the RequestRow component after executing the setRequests? My understanding is that the requests get initialized as undefined in the beginning and before being set with the asynchronously called object, it gets passed to the RequestRow component as undefined, and the error oc…
how to stop multiple re-renders from doing multiple api calls useEffect?
I’m new to react functional components and I’m trying to get the weather data on multiple cities on page load but useEffect is now re-rending each call. How can I write this so useEffect doesn’t cause re-renders? Answer You can make the fetchData function to return the data you need without …
Initialise helper class in a react functional component
The class methods which are passed as args from the functional component, are kept ‘in memory’ and doest not reflect the updated state. I can reinitialise on state changes but wish to avoid it. Answer You’ll need an additional ref to be able to use the latest values in an async callback. Eit…
replace this.function.bind(this) for function component
I have a class component that looks like this: I want to modify it into a functional component. However, I am unable to figure out how to accurately modify this part: onClick={this.addCoord.bind(this)} because currently if I use onClick={props.addCoord()}, I would get errors like these upon using it: TypeErro…
Why to use Object.assign() to update functional component props change?
I have a list of students and I display them on the table. There are two buttons that indicate by which value should I sort the list (name or birthdate). When the button is clicked and I sort the list, the list itself is getting sorted, but it’s not updating if I don’t assign the list to the new l…
TypeScript React.FC confusion
I am learning TypeScript and some bits are confusing to me. One bit is below: For both functional components above, I see TypeScript generates the same JS code. The PrintName2 component seems more streamlined to me as far as readability. I wonder what’s the difference between the two definitions and if …