Questions tagged [react-state]
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.
react-state
1,264
questions
569
votes
25
answers
587k
views
React - changing an uncontrolled input
I have a simple react component with the form which I believe to have one controlled input:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
...
- 12.4k
232
votes
14
answers
344k
views
What is useState() in React?
I am currently learning hooks concept in React and trying to understand below example.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call &...
- 33.7k
27
votes
6
answers
106k
views
React Use Context. Cannot destructure property 'currentChatbotInEdit' of 'Object(...)(...)' as it is undefined. How can I fix that?
I try to import the chatbotcontext in order to get access to current chatbot in edit, but something went wrong. Do you have ideas what could be the issue here?
Here is the error message:
Here is an ...
- 525
21
votes
5
answers
34k
views
How to initialize the react function component state from props
I'm using React hooks for app state, I wondered about how to initialize the function component state using props? The useState hook doc says something definitive like,
const [count, setCount] = ...
- 8,811
20
votes
5
answers
19k
views
zustand typescript persist how to type store
I've this simple store
interface CartState {
cart: { [id: string]: CartDto };
addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void;
removeItem: (id: string)...
- 2,504
15
votes
1
answer
32k
views
React testing library - waiting for state update before testing component
I am testing a combobox on first render the initial value of the combobox is undefined. Then using query parameters and a useEffect the the component find the relevant option and sets the value state ...
- 287
14
votes
4
answers
1k
views
How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?
This question has been going round and round in my head since I read the release notes (and other related hype) around React 0.14 - I'm a big fan of React and I think that stateless components (https:/...
- 2,294
12
votes
1
answer
43k
views
State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
I am new to React with Typescript and I am getting an error stating :
No overload matches this call. Overload 1 of 2, '(props:
Readonly<{}>): IndexPage', gave the following error.
Type '...
- 517
9
votes
3
answers
21k
views
How to update (re-render) the child components in React when the parent's state change?
Okay, I already know one way to do this. However, I am asking this in case I am reinventing the wheel since I am very new to React. I was under the impression that if a parent component passes her ...
- 773
8
votes
4
answers
3k
views
next/link losing state when navigating to another page
I am developing a library Next.js application. For the purposes of this question, I have two pages in my application: BooksPage which lists all books, and BookPage which renders details of a book. In ...
- 817
8
votes
1
answer
1k
views
React component re-renders after setting state to the same value
import { useState } from "react";
export default function App() {
const [buttonClicked, setButtonClicked] = useState(false);
console.log('Render');
return (
<div className=&...
- 181
7
votes
3
answers
13k
views
How to Unmount React Functional Component?
I've built several modals as React functional components. They were shown/hidden via an isModalOpen boolean property in the modal's associated Context. This has worked great.
Now, for various ...
- 1,223
7
votes
4
answers
17k
views
React - State Hook map is not a function
I know there are similar questions, but I can't find out why the error happens. Div shows, but then app crashes (as if was some length problem)
Code is similar to examples I found, like this sandbox
...
- 1,916
7
votes
2
answers
12k
views
Why am I getting "Type 'String[] | undefined' is not an array type." for my object variable?
I am trying to create a state variable named hidden to be a dictionary (ex: [{'cutomkey1':'somevalue', 'customkey2':'somevalue'}]). hidden can be empty [{}].
In one of my methods I want to push an ...
- 5,648
7
votes
1
answer
244
views
Lifting a state so I can modify it with an onPress
I am trying to figure out how lifting states work. Currently, I am trying to use onPress in a different component to change the state. In the snack demo I provided below, ListHome and MapHome do not ...
- 484
7
votes
1
answer
155
views
React design of a stateful list where every item depends on the previous one
I'm developing one of my projects with React, and I need to create some list where each item represents a table row, and is dependent on the previous line (and partially on the next line) - similar to ...
- 1,277
6
votes
3
answers
4k
views
Force input's onChange event bubble to parent form with the value stored in the state
EDIT
Sorry for showing wrong use-case. All inputs inside the Form are being passed though this.props.children, and they can be situated at any deep point of the components tree, so the approach of ...
- 2,200
5
votes
3
answers
3k
views
How does one trigger an action in a child functional component in React?
With a basic form/input layout, it's clear that a callback should be used for state changes from child to parent (initiated by child), but how can the parent ask the child component to re-assess its ...
- 1,180
5
votes
5
answers
4k
views
React select dropdowns that depend on each other
I am trying to make 3 select dropdowns automatically change based on the selection.
First dropdown has no dependencies, 2nd depends on first, and 3rd depends on 2nd.
This is a very simplified version ...
- 67.5k
5
votes
1
answer
2k
views
Can't call setState inside socket.io callback React.js
I am facing the following issue:
Inside a react component that handles state, there is a websocket connection with socket.io. Whenever I receive some events I should do some operation and update the ...
- 1,956
5
votes
2
answers
2k
views
React/Socket.io not displaying latest message passed down as prop
I am working on a chat application using React and socket.io. Back end is express/node. The relevant components are:
Room.js --> Chat.js --> Messages.js --> Message.js
messageData received ...
- 65
5
votes
2
answers
9k
views
How to pass async state to child component props?
I'm new to react and I am trying to fetch data from an API and pass the data to a child component. I've passed the data to the state on my parent component, however, when I pass it to the child ...
- 841
5
votes
2
answers
8k
views
Lifting State Up with Functional Components
I'm trying to lift the state of the input in AddTodo.js to my App.js.
I'm getting the next error : "TypeError: Cannot read property 'preventDefault' of undefined".
I've tried many variations ...
- 617
5
votes
0
answers
1k
views
Zustand: One State Split Into Slices or Multiple Stores?
I'm using Zustand for state management. Currently, I have 20 slices. And I'm afraid the number of slices will triple. What would be the best approach, splitting one really large state into slices or ...
- 311
4
votes
3
answers
17k
views
Keeping placeholder on react-select
I have tried everything I can think of, but I cannot prevent the placeholder in react-select from disappearing (I assume changed to display: none because it is no longer in the HTML) when a value is ...
- 4,100
4
votes
2
answers
12k
views
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 ...
- 85
4
votes
2
answers
15k
views
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) => (
<div>
&...
- 1,204
4
votes
1
answer
16k
views
Updating a specific field of object state in React
I am using a React functional component where I want to update only a specific field of the state and retain the other values like before. Here's the state initialization -
const[value, setValue] = ...
- 123
4
votes
3
answers
13k
views
What's the best way to get textbox values on button click in React?
Normally in HTML you do something like this:
<form>
<input type="text"/>
<input type="text"/>
<input type="submit"/>
</form>
I believe this is not the ...
- 315
4
votes
1
answer
6k
views
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 ...
- 891
4
votes
2
answers
10k
views
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 ...
- 2,912
4
votes
1
answer
2k
views
React Memo resets values in component state
What I am trying to do
I'm trying to use an array of objects (habits) and render a "Card" component from each one.
Now for each Card (habit) you can "mark" that habit as done, ...
- 128
4
votes
1
answer
14k
views
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....
- 1,299
4
votes
2
answers
798
views
How to pass input value from one component to the other component( where api & data display code are )? how to make connection between 2 components?
I have two components where one comp provides a search input field where the user will enter data(e.g; city name) and another comp provides the main weather data( based on the user search input from ...
- 69
4
votes
2
answers
794
views
react recursive functional component update state
I trying to do parent and child recursive state using React. I have added App3 which has initial state should maintain entire state into it.
I have no idea how can I add update delete with this when ...
- 705
4
votes
2
answers
2k
views
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, ...
- 95
4
votes
3
answers
1k
views
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 ...
- 149k
4
votes
1
answer
2k
views
ReactJS Handling Form Errors With MaterialUI
When the form is submitted I want to validate two fields. Specifically I want to check if the password has at least 5 characters, and that the password and confirmPassword fields match. I went ahead ...
- 147
4
votes
1
answer
2k
views
React-Native Prevent keyboard dismiss on state update
I have a button that is disabled if a state is false and the state is change if some conditions are not met on each item in an array, one of the condition is that a textfield should contain something, ...
4
votes
1
answer
7k
views
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 ...
- 71
4
votes
0
answers
588
views
ReactJS State returning default value in some functions
I have a ReactJS file where at the top I have one of my states defined as
const [items, setItems] = useState(0);
This updates a value I show on the screen properly, and when I read the value of items ...
- 305
4
votes
2
answers
4k
views
react state not updated even inside callback
I'm having problem setting state. I've to pass extra classes to CardComponent on click, on click is working fine, setState is called, and the callback executes, but state is not mutated (as logs ...
- 99
4
votes
1
answer
309
views
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) => (
<div className="date-time-entry" key={i}>
&...
- 2,064
4
votes
1
answer
3k
views
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, ...
- 541
4
votes
4
answers
2k
views
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 ...
- 1,332
4
votes
1
answer
421
views
how to two way bind data input in react?
consider that i have a data like this:
const[specs, setSpecs] = useState(['motherboard', 'ram', 'mouse'])
I need to somehow two way bind this to my input.
I was trying out something like this:
const ...
- 151
3
votes
1
answer
15k
views
Making API calls out of React Functional Component
I am new to React and I know about the concepts of Functional and Class components aswell as Hooks such as useEffect and useState; hence I am having troubles turning this knowledge into practice, as I ...
- 530
3
votes
2
answers
2k
views
React array state keeps resetting on update in functional component
I've created a React component with an array state state.colors that contains three hex values (initial state is ['#aaaaaa', '#aaaaaa', '#aaaaaa']). Each value in the state.colors array can be updated ...
- 1,030
3
votes
3
answers
3k
views
React setState for multi level state object
I'm trying to update my state object which contains multiple levels. See this example https://codesandbox.io/s/oq9kp9vy5y.
The problem is, that the values in the render method, does not update ... ...
- 201
3
votes
1
answer
843
views
Why is global variable executed twice in React
I'm a newbie on frontend development and learning React. Now I'm trying to build a hello-world project.
After executing npx create-react-app myapp, I got an initial React project and I just coded in ...
- 12.1k