React State is a built-in React object that is used to contain data within a component. One of its main purposes is to re-render the component whenever the state changes.
Questions tagged [react-state]
1169 questions
4
votes
1 answer
React useState() & useContext() - TypeError: setState is not a function - What am I doing wrong?
I've got a few React functional Components that I would like to share a state. In this example two toggle buttons that would conditionally show/hide a searchbar and a navbar.
--Solution, based on the accepted answer, on the bottom--
I'm completely…
Tim
- 861
- 1
- 12
- 27
4
votes
1 answer
React form loses focus on update
I am working on a form that has, among other fields, calendar entries - dates and times. The code is below:
{dates.map((d, i) => (
Igor Shmukler
- 1,742
- 3
- 15
- 48
4
votes
2 answers
Fetch data with a custom React hook
I'm newbie in React but I'm developing an app which loads some data from the server when user open the app. App.js render this AllEvents.js component:
const AllEvents = function ({ id, go, fetchedUser }) {
const [popout, setPopout] =…
ivnku
- 83
- 8
4
votes
3 answers
Is the rule of ReactJS re-rendering just: if the state of component changes, then the whole sub-tree is re-rendered?
First of all, by "re-render", here it means either
the render() method of any class component is called, OR
the function of the function component is called.
Let's called the element in the actual DOM changing a "refresh", to distinguish it from…
nonopolarity
- 146,324
- 131
- 460
- 740
4
votes
1 answer
React useReducer hook state lost after page refresh
When user succssfully login it changes the auth state from null to true and after landing in home page when i refresh the page it set to
default state value from initialState(AuthState.js) i want to persist the state even after user refresh the…
user11657014
- 71
- 3
- 10
4
votes
2 answers
Using React state, how can I remove markers from a Google map before adding new ones?
I have a React app that displays a map with some markers on it. The map markers are refreshed by clicking a button that fetches new locations from the Google Maps API. I want to remove the previous location markers from the map on each…
Michael Lynch
- 2,682
- 3
- 31
- 59
4
votes
1 answer
How to use array state in React function component?
I am trying to use an array state for a React functional component.
This is the code I tried.
const inputLabel = Array(5).fill(React.useRef(null));
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
…
think-serious
- 1,229
- 2
- 12
- 27
4
votes
1 answer
How to manage react state for a list of JSX.Elements correctly
I am using react-hooks to manage a list of JSX.Elements. However, once the element changed, trying to delete it will cause unexpected behavior.
I had tried using useReducer, remove by index etc, still unexpected updated result…
Jiahua Zhang
- 511
- 7
- 19
4
votes
2 answers
Send multiple props across components React
I am trying to send two variables from the Component 'Game' to the Component 'App' but I am unsure how to send more than one prop at a time.
This what I have:
//App Component
class App extends Component {
constructor(props) {
super(props)
…
Barkley101
- 65
- 1
- 1
- 7
4
votes
2 answers
Selected Value not showing in Textfield Select - Material UI React Component
I have TextField Select Material UI components based on a certain number of value in a variable.
{this.state.selectedNextHops.map((nextHop, index) => (
vjeta
- 1,178
- 2
- 11
- 18
4
votes
4 answers
ReactJS component state is not updating when any value in state array is modified
In my React component, I want my state to automatically update without reloading the page. I am using lodash.iseqaual method to compare the state change, but this not updating the state.
Below is my component:
import React, { Component } from…
Reema Parakh
- 1,347
- 3
- 19
- 46
4
votes
3 answers
What's the best way to get textbox values on button click in React?
Normally in HTML you do something like this:
I believe this is not the React way to do it.
Another way to do like i did in my app, is not the best way to…
Salomé
- 303
- 1
- 4
- 14
3
votes
1 answer
Make input field populate with today's date when user clicks on the select option
When the user clicks the option value "apple" for example, the input field should automatically populate with today's date.
Here's my code
import "./styles.css";
import React, {useState} from "react"
export default function App() {
const…
Katleho-codes
- 33
- 5
3
votes
1 answer
React Bootstrap Collapse Only have one item collapsed at any time?
How do I convert the below code so that if I call
JPWilson
- 691
- 4
- 14
3
votes
2 answers
Input Handle Change
I want to update the text whatever users types in the input field and then join that text with another text (i.e ".com" in this example). So somehow I managed to join the extension with the user's input text but when the input field is empty the…
Rabyaan Khan
- 41
- 4