Questions tagged [react-16]

92 questions
2
votes
0 answers

React Error: Hooks can only be called inside the body of a function component

I know this is very common error Invariant Violation: Hooks can only be called inside the body of a function component but still I am not able to figure it out how to fix it in my code. What I understood is the issue is with useMemo hook in my code…
Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
2
votes
1 answer

How can I pass a param to a promise inside usePromise React hook

I created an usePromise React Hook that should be able to resolve every kind of javascript promise and returns every result and state: data, resolving state and error. Im able to make it work passing the function without any param, but when I try to…
Rashomon
  • 5,962
  • 4
  • 29
  • 67
2
votes
1 answer

Why react-google-maps rendering one Circle component twice?

When I added react-google-maps to project, render worked twice. So I have 2 circles one under another. Also, I display the center coordinates by onDragEnd() method. This event works for only one of this circles. Any others google maps dosen`t…
VladaNak
  • 21
  • 1
2
votes
0 answers

Consuming ReactContext (specifically) Consumers across multiple packages

Context I created a Context and exported both Producer and Consumer. I am now wrapping my app level example with Producer. I want to be able to consume ContextConsumer inside a module which is served by a different package. However, when I try to…
2
votes
2 answers

React lazy in typescript

I've just updated my create-react-app to version 2.1.1 which adds support for typescript (check it out). by command npx create-react-app my-app --typescript, one can create a react app with typescript by default, but adding lazy import React, {…
Bahram
  • 1,464
  • 2
  • 22
  • 38
2
votes
1 answer

Why might componentWillMount be called multiple times with React Fibre?

I've read on multiple sources now that with react Fibre (async rendering) componentWillMount() may be called multiple times. Why would this happen?
Adam Thompson
  • 3,278
  • 3
  • 22
  • 37
2
votes
0 answers

React components not mounting

I recently upgraded to React v 16.5 and have been getting issues with some of my components. I'm showing one of them below that use to work before on 16.4.1. It's a simple download icon that renders a dropdown when state isOpen is true and will…
2
votes
0 answers

Does it matter to return only modified state attributes in getDerivedStateFromProps()?

I know that in React 16 new lifecycle method getDerivedStateFromProps() I should return null if there is nothing to change in state, but I wonder about case when I have to update state anyway, but amount of modified state attributes may vary. Does…
TMG
  • 2,620
  • 1
  • 17
  • 40
2
votes
1 answer

React Fragment not rendering in function

Here's my React component below, can anyone understand why the react.Fragment doesn't render at all in the getResults function? I'd like it to eventually display the results from the api response. My api query works fine and I can get the data I'm…
HKG
  • 261
  • 4
  • 15
2
votes
0 answers

company props is not shown updated inside withHandler

I am using getDerivedStateFromProps to update the state so I can have updated company object when user refreshes the page. It updates the company object which I checked by debugging inside component but when I try to change the value from the field,…
milan
  • 2,409
  • 2
  • 34
  • 71
2
votes
1 answer

Ways to redirect user after componentDidCatch

Caught the error in my componentDidCatch() method, and the custom error UI is rendered. What would be a neat way to move on from the error and not make the user to force update the page? import * as React from "react"; interface ErrorBoundaryState…
alanmynah
  • 241
  • 2
  • 11
2
votes
1 answer

Is it possible to change the displayName of a Context.Consumer?

How can I find my way around nested Contexts and avoid this hell?
Qwerty
  • 29,062
  • 22
  • 108
  • 136
2
votes
1 answer

replace componentWillRecieiveProps in react 16 in redux?

Says I have this reducer that changed my job status from 'pending' to 'approve', how to use handle it without using the going to be deprecated componentWillRecieiveProps? I used to do this componentWillRecieiveProps(prevProps, nextProps) { if…
Jamie Aden
  • 943
  • 2
  • 12
  • 20
2
votes
1 answer

Add an ellipsis to middle of long string in React16

I am trying to add an ellipsis to the mid-point in a string with the following complications: I don't know how long the string is going to be I only know the max-width and min-width of the parent element The string may or may not fit into it's…
2
votes
1 answer

React: `return` an array from component, `key` value issue

NOTE: I do understand the importance of keys in arrays. Normally I use .map for repeating over an array and use the index variable .map provides. In my case I have no access to any index variable. I want to know a better way than manually adding…
Asim K T
  • 16,864
  • 10
  • 77
  • 99