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
6
votes
3 answers
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 passing the handleChange directly to inputs will not…
Limbo
- 2,123
- 21
- 41
5
votes
5 answers
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 of my code:
// record, onSave, planets,…
Alex
- 66,732
- 177
- 439
- 641
5
votes
2 answers
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 from the server is stored in state in Room.js. It is then…
devinrbopp
- 63
- 5
5
votes
3 answers
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 state and communicate that back to parent?
The end…
Zack
- 1,181
- 2
- 11
- 26
5
votes
2 answers
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 component as props it logs as an empty array. I'm sure…
Sai
- 801
- 3
- 10
- 27
5
votes
1 answer
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 state of the component. Example:
socket.on('some…
DrNio
- 1,936
- 1
- 19
- 25
4
votes
2 answers
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 comp 1) like temp, wind, etc.. how should I pass…
Ahsan Khalid
- 69
- 8
4
votes
0 answers
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 creating multiple stores (and splitting each one…
ellis
- 181
- 10
4
votes
2 answers
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 it comes to recursive.
I have tried…
Gautam Parmar
- 686
- 8
- 18
4
votes
1 answer
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] = React.useState({
a: "5",
b: "6"
});
I…
coolest-duck
- 105
- 1
- 1
- 10
4
votes
2 answers
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 clearly deny that state is updated - see onSelect…
Ahmad Raza
- 129
- 2
- 13
4
votes
2 answers
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 and looking online just confuses me more (I do manage to…
NewbieAeg
- 557
- 3
- 8
- 15
4
votes
1 answer
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 and implemented state to hold these error message.…
aDabOfRanch
- 137
- 9
4
votes
1 answer
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, which will update that Card's state.
I've used React.memo to prevent…
Swapnil Ingle
- 128
- 8
4
votes
1 answer
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 handleOnChange = (e, spec, index) => {
let data…
Hemanth
- 141
- 2
- 13