React.js setState not working [duplicate] - javascript

This question already has answers here:
setState doesn't update the state immediately [duplicate]
(15 answers)
Closed 4 years ago.
Im a noob in React and trying to make a simple app for water phases where the user enters a number and then based on the value it should display the state of water, for example if he enters 212 it should say gas and for 12 it should say solid, but for some reason its not displaying the values correctly, Any help is greatly appreciated!!!
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "liquid",
temp: 0
};
this.handlenum1Change = this.handlenum1Change.bind(this);
}
handlenum1Change(evt) {
console.log(evt.target.value);
this.setState({
temp: Number(evt.target.value)
});
let temp = this.state.temp
if (temp > 100) {
this.setState({
msg: "boiling"
})
} else if (temp < 32) {
this.setState({
msg: "frozen"
})
} else {
this.setState({
msg: "liquid"
})
}
}
render() {
return (
<div>
<h1> {this.state.msg} </h1>
<form className="form-inline">
<div className="form-group">
<label> Temp: </label>
<input type="number" onChange={this.handlenum1Change} className="form-control" />
</div>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

setState is asynchronous and won't update the state straight away. It collects multiple state changes before updating.
That means, that this.state won't hold your new value right away.
Or to quote the React docs here:
setState() does not always immediately update the component. It may
batch or defer the update until later. This makes reading this.state
right after calling setState() a potential pitfall. Instead, use
componentDidUpdate or a setState callback (setState(updater,
callback)), either of which are guaranteed to fire after the update
has been applied. If you need to set the state based on the previous
state, read about the updater argument below.
Instead, do it the other way around and work with the user input before setting the new state. That way you can also collectively set both, the temperature and the message at once:
const temp = Number(evt.target.value);
let msg = '';
if (temp > 100) {
msg = 'boiling';
} else if (temp < 32) {
msg = 'frozen';
} else {
msg = 'liquid';
}
this.setState({
temp,
msg,
});

setState is asynchronous. Separately, if you set state (setState({msg: ...})) based on current state (this.state.temp), you must use the callback version of setState.
But in this case you can just set temp and msg at the same time, since they're both working from something outside of state (the temp from the input):
handlenum1Change(evt) {
console.log(evt.target.value);
const temp = Number(evt.target.value);
let msg;
if (temp > 100) {
msg = "boiling";
} else if (temp < 32) {
msg = "frozen";
} else {
msg = "liquid";
}
this.setState({temp, msg});
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "liquid",
temp: 0
};
this.handlenum1Change = this.handlenum1Change.bind(this);
}
handlenum1Change(evt) {
console.log(evt.target.value);
const temp = Number(evt.target.value);
let msg;
if (temp > 100) {
msg = "boiling";
} else if (temp < 32) {
msg = "frozen";
} else {
msg = "liquid";
}
this.setState({temp, msg});
}
render() {
return (
<div>
<h1> {this.state.msg} </h1>
<form className="form-inline">
<div className="form-group">
<label> Temp: </label>
<input type="number" onChange={this.handlenum1Change} className="form-control" />
</div>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

setState is not an imperative method to change the state immediately but a request you make to React to change the state of your component as soon as it can (see here).
Another important thing you should factor in is that the event React uses is not a standard HTML Event but rather a SyntheticEvent created by React itself to wrap the standard event, and this SyntheticEvent will be discarded as soon as possible for "performance reasons".
Now, your problem is easily solved by changing
const temp = this.state.temp
To
const temp = Number(evt.target.value)
but you should keep in mind the two above factors when using a React Component's state.
Edit: The consideration about SyntethicEvents is especially important when using the callback version of setState, since accessing the value from within that callback will most likely not contain the value of the input that fired the onChange event, so you have to store it in a variable in the scope outside the callback, for example:
handleInputChange = (event) => {
const value = event.target.value
this.setState(prevState => {
return { myValue: prevState.value + value }
})
}

Since you are not using this.state.temp anywhere else except comparing, you can assign the value in a variable and compare it. FYI, setState wont reflect the changes immediately.
handlenum1Change(evt) {
let temp = evt.target.value;
if (temp > 100) {
this.setState({
msg: "boiling"
})
} else if (temp < 32) {
this.setState({
msg: "frozen"
})
} else {
this.setState({
msg: "liquid"
})
}
}

Related

How to change a innerHtml of an div in React?

I'm a newbie in React. I have 6 divs and whenever I call foo() I want to add a number to the first div that's empty.
For example, let's say that the values of the six divs are 1,2,0,0,0,0 and when I call foo(), I want to have 1,2,3,0,0,0.
Here is what I've tried:
var index = 1;
function foo() {
let var x = document.getElementsByClassName("square") // square is the class of my div
x[index-1].innerHTML = index.toString()
index++;
}
I don't know when I should call foo(), and I don't know how should I write foo().
The "React way" is to think about this is:
What should the UI look like for the given data?
How to update the data?
Converting your problem description to this kind of thinking, we would start with an array with six values. For each of these values we are going to render a div:
const data = [0,0,0,0,0,0];
function MyComponent() {
return (
<div>
{data.map((value, i) => <div key={i}>{value}</div>)}
</div>
);
}
ReactDOM.render(<MyComponent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Now that we can render the data, how are we going to change it? From your description it sounds like every time a function is called, you want change the first 0 value in the array to another value. This can easily be done with:
// Find the index of the first 0 value
const index = data.indexOf(0);
if (index > -1) {
// if it exists, update the value
data[index] = index + 1;
}
To make this work properly with React we have to do two things: Keep track of the updated data in state, so that React rerenders the component when it changes, and update the data in a way that creates a new array instead of mutating the existing array.
You are not explaining how/when the function is called, so I'm going to add a button that would trigger such a function. If the function is triggered differently then the component needs to be adjusted accordingly of course.
function update(data) {
const index = data.indexOf(0);
if (index > -1) {
data = Array.from(data); // create a copy of the array
data[index] = index + 1;
return data;
}
return data;
}
function MyComponent() {
var [data, setData] = React.useState([0,0,0,0,0,0]);
return (
<div>
{data.map((value, i) => <div key={i}>{value}</div>)}
<button onClick={() => setData(update(data))}>Update</button>
</div>
);
}
ReactDOM.render(<MyComponent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
You would use state to hold the value and then display the value of that variable.
If you're using functional components:
const App = () => {
const [values, setValues] = React.useState([0, 0, 0, 0, 0, 0]);
const [index, setIndex] = React.useState(0);
const foo = () => {
const tempValues = [...values];
tempValues[index] = index;
setValues(tempValues);
setIndex((index + 1) % values.length);
}
return (
<div>
{ values.map((value) => <div key={`square-${value}`}>{value}</div>) }
<button onClick={ foo }>Click me</button>
</div>
);
};
In class-based components:
constructor(props) {
super(props);
this.state = {
values: [0, 0, 0, 0, 0, 0],
index: 0
};
this.foo = this.foo.bind(this);
}
foo() {
const tempValues = [...values];
const newIndex = index + 1;
tempValues[newIndex] = newIndex;
this.setState({
values: tempValues,
index: newIndex
});
}
render() {
return (
<div>
{ values.map((value) => <div key={`square-${value}`>value</div>) }
<button onClick={ this.foo}>Click me</button>
</div>
);
}
If you need to set the innerHTML of a React component, you can try this:
return <div dangerouslySetInnerHTML={foo()} />;
the foo() here returns the value you want to post in the div.
But in my opinion, your way of thinking on this problem is wrong.
React is cool, but the logic is a bit different of common programming :D
The ideal approach would be to have the divs created by React (using its render method). Then you can pass a variable from array, which is stored in your state. You then just need to change this array within the state and it'll reflect in your view. If you need a working example, just let me know.
However, if you want to update the divs that are not created using react, then you need to use a dirty approach. I would suggest not to use react if you can't generate the view from react.
React is good to separate the concerns between the view and the data.
So the concept of state for this example is useful to store the data.
And the JSX, the React "template" language, to display the view.
I propose this solution:
import React from "react";
class Boxes extends React.Component {
state = {
divs: [1, 2, 3, 0, 0, 0]
};
add() {
// get the index of the first element equals to the condition
const index = this.state.divs.findIndex(elt => elt === 0);
// clone the array (best practice)
const newArray = [...this.state.divs];
// splice, i.e. remove the element at index AND add the new character
newArray.splice(index, 1, "X");
// update the state
// this is responsible, under the hood, to call the render method
this.setState({ divs: newArray });
}
render() {
return (
<div>
<h1>Boxes</h1>
{/* iterate over the state.divs array */}
{this.state.divs.map(function(elt, index) {
return (
<div
key={index}
style={{ border: "1px solid gray", marginBottom: 10 }}
>
{elt}
</div>
);
})}
<button onClick={() => this.add()}>Add a value</button>
</div>
);
}
}
export default Boxes;

setState inside a method one step behind

I´m working on a React project, which involves displaying a value (DisplayValue) and then storing that value inside state so that I can use it later. Problem is state is always one step behind (for instance, if displayValue is "12", value is just 1). I need both values to be the same. Is it because setState is async? How can I fix it?
inputDigit(digit) {
const {
pendingOperation,
displayValue
} = this.state;
if (pendingOperation) {
this.setState({
displayValue: String(digit),
pendingOperation: false
})
}
value1 = parseFloat(displayValue);
this.setState({
displayValue: displayValue === "0" ? String(digit) : displayValue + String(digit),
value: value1
}, () => {
console.log(this.state.value)
})
};
Codepen: https://codepen.io/HernanF/pen/jXzPJp
You're breaking a fundamental React rule: Never set state based on existing state by passing an object into setState. Instead, use the callback form, and use the state object the callback form receives. You also probably want to call setState once, not (potentially) twice.
So, you want those changes in the update callback, something like this:
inputDigit(digit) {
this.setState(
({pendingOperation, displayValue}) => {
const newState = {};
if (pendingOperation) {
newState.displayValue = String(digit);
newState.pendingOperation = false;
}
newState.value = parseFloat(displayValue);
// Not sure what you're trying to do with the second setState calls' `displayValue: displayValue === "0" ? String(digit) : displayValue + String(digit),`...
return newState;
},
() => {
console.log(this.state.value)
}
);
}
There seem to be a problem in the code, not React
value1 = parseFloat(displayValue);
should be
value1 = parseFloat(displayValue + String(digit));
The same as for displayValue

Component doesn't update after setState

I use a dictionary to store the likes of posts in every card.
constructor(props) {
super(props);
this.state = {
like_dict: {}
};
this.likeClicked = this.likeClicked.bind(this)
}
I have a like button on every card and the text denotes the number of likes.
<Button transparent onPress={() => {this.likeClicked(poid, 0)}}>
<Icon name="ios-heart-outline" style={{ color: 'black' }} />
</Button>
<Text>{this.state.like_dict[poid]}</Text>
The likedClicked function looks like this. I set the state of like_dict, but the text above won't rerender.
likeClicked(poid, liked){
var like_dict_tmp = this.state.like_dict
if (liked){
like_dict_tmp[poid] -= 1
}else{
like_dict_tmp[poid] += 1
}
this.setState({
like_dict: like_dict_tmp
})
}
One of the key principles of React is never mutate the state directly.
When you do var like_dict_tmp = this.state.like_dict, like_dict_tmp is referencing the same object in the state so altering like_dict_tmp will mutate the state directly, so the subsequent setState will not update the component.
You can create a shallow copy with var like_dict_tmp = { ...this.state.like_dict } or replace the whole function with:
this.setState((prevState) => ({
like_dict: {
...prevState,
[poid]: (prevState[poid] || 0) + (liked ? 1 : -1),
},
}));
You need to copy the state before modifying it. What you are doing is just creating a link to the state in like_dict_tmp (either use what I am doing below, or use concat with an empty array):
var like_dict_tmp = this.state.like_dict.concat([])
likeClicked(poid, liked) {
var like_dict_tmp = this.state.like_dict.slice()
if (liked) {
like_dict_tmp[poid] -= 1
} else {
like_dict_tmp[poid] += 1
}
this.setState({
like_dict: like_dict_tmp
})
}
Also, {} is an object in JS, and is not typically called a dictionary

ReactJS, changing img src stored in state array

So, first of all, what I'm trying to do is the following: I have a few divs that contain some text and an image. All the data for the divs is stored in a state array. You can also add divs and delete whichever div you desire. What I would like to implement now, is to change the picture when the user clicks on an image. There is a preset image library and whenever the user clicks on the image, the next image should be displayed.
Here is some relevant code:
let clicks = 0;
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
data : [
createData( someimage, "Image 1"),
createData( anotherimage, "Image 2"),
createData( thirdimage, "Image 3"),
createData( fourthimage, "Image 4"),
],
imgs : [imgsrc1,imgsrc2, imgsrc3, imgsrc4],
}
}
newIcon (n) {
let newStateArray = this.state.data.slice();
let newSubStateArray = newStateArray[n].slice();
if(clicks === 1) {
newSubStateArray[0] = this.state.imgs[0];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 2) {
newSubStateArray[0] = this.state.imgs[1];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 3) {
newSubStateArray[0] = this.state.imgs[2];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 4) {
newSubStateArray[0] = this.state.imgs[4];
this.setState({imgscr:newSubStateArray});
clicks++;
}
}
render () {
let { data }= this.state;
return(
<div>
{data.map((n) => {
return(
<Child imgsrc={n.imgsrc} key={n} newIcon={this.newIcon.bind(this, n)} header={n.header} />
);
})}
</div>
);
}
A few sidenotes: createArray is a function to create the sub-arrays and can probably be ignored for this question. What is important to know is, that the first element is called imgsrc, and the second element is called
So, something is going wrong here but I'm not sure what it is exactly. My guess is, that I'm not properly accessing the values within the arrays. Above, you can see that I tried to slice the arrays and to then allocate the new value. Another problem I've encountered, is that n comes up as undefined, when I try to call it from my newIcon()-function.
I'm kind of lost here, as I'm quite new to React so any sort of hints and suggestions are welcome.
I would do away with all that code in newIcon, and keep clicks as part of the state. If you have an array of images then you can use clicks as a pointer to the next image that should be shown.
In this example I've taken the liberty of adding in dummy images to help explain, and changed clicks to pointer as it makes more sense.
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
// clicks is called `pointer` here and initially
// is set to the first index of the imgs array
pointer: 0,
imgs: [
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png'
]
};
// Bind your class method in the constructor
this.handleClick = this.handleClick.bind(this);
}
// Here we get the length of the imgs array, and the current
// pointer position. If the pointer is at the end of the array
// set it back to zero, otherwise increase it by one.
handleClick() {
const { length } = this.state.imgs;
const { pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer + 1;
this.setState({ pointer: newPointer });
}
render() {
const { pointer, imgs } = this.state;
// Have one image element to render. Every time the state is
// changed the src of the image will change too.
return (
<div>
<img src={imgs[pointer]} onClick={this.handleClick} />
</div>
);
}
}
DEMO
EDIT: Because you have more than one div with images the sources of which need to change, perhaps keep an array of images in a parent component and just pass a subset of those images down to each Image component as props which you then store in each component's state. That way you don't really need to change the Image component that much.
class Image extends React.Component {
constructor(props) {
super(props);
this.state = { pointer: 0, imgs: props.imgs };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const { length } = this.state.imgs;
const { pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer + 1;
this.setState({ pointer: newPointer });
}
render() {
const { pointer, imgs } = this.state;
return (
<div>
<img src={imgs[pointer]} onClick={this.handleClick} />
</div>
);
}
}
class ImageSet extends React.Component {
constructor() {
super();
this.state = {
imgs: [
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png',
'https://dummyimage.com/100x100/bd86bd/fff.png',
'https://dummyimage.com/100x100/68b37c/fff.png',
'https://dummyimage.com/100x100/c9a7c8/000000.png',
'https://dummyimage.com/100x100/c7bfa7/000000.png'
]
}
}
render() {
const { imgs } = this.state;
return (
<div>
<Image imgs={imgs.slice(0, 4)} />
<Image imgs={imgs.slice(4, 8)} />
</div>
)
}
}
DEMO
Hope that helps.
Try to bind the newIcon() method in the constructor, like this :
this.newIcon = this.newIcon.bind(this);
and in the render method call it normally without any bind :
this.newIcon(n)

React.js Understanding setState

I've been having a go at learning React.js by writing a small calculator application. I thought things were going quite well until I learned that setState is asynchronous and my mutations therefore do not get immediately applied.
So my question is, what is the best way to keep a running total based upon the values being added to an input. Take the following example:
var Calculator = React.createClass({
total : 0,
getInitialState : function(){
return {
value : '0'
};
},
onValueClicked : function (value) {
var actual, total, current = this.state.value;
if(value === '+') {
actual = this.total = parseInt(this.total, 10) + parseInt(current, 10);
} else {
if(parseInt(current, 10) === 0) {
actual = value;
} else {
actual = current.toString() + value;
}
}
this.setState({ value : actual });
},
render : function () {
return (
<div className="calc-main">
<CalcDisplay value={this.state.value} />
<CalcButtonGroup range="0-10" onClick={this.onValueClicked} />
<CalcOpButton type="+" onClick={this.onValueClicked} />
</div>
)
}
});
var CalcDisplay = React.createClass({
render : function () {
return (
<input type="text" name="display" value={this.props.value} />
);
}
});
var CalcButtonGroup = React.createClass({
render : function () {
var i, buttons = [], range = this.props.range.split('-');
for(i = range[0]; i < range[1]; i++) {
var handler = this.props.onClick.bind(null, i);
buttons.push(<CalcNumberButton key={i} onClick={ handler } />);
}
return (
<div className="calc-btn-group">{ buttons }</div>
);
}
});
var CalcNumberButton = React.createClass({
render : function () {
return (
<button onClick={this.props.onClick}>{this.props.key}</button>
);
}
});
var CalcOpButton = React.createClass({
render : function () {
var handler, op = this.props.type;
handler = this.props.onClick.bind(null, op);
return (
<button onClick={handler}>{op}</button>
);
}
});
React.renderComponent(<Calculator />, document.getElementById('container'));
In the example above I gave up completely on storing the total within the state and kept it outside. I've read that you can have a callback run when setState has finished but in the case of a calculator I need it to be snappy and update quickly. If the state isn't getting updated with each button press and I quickly hit the buttons - things are going to fall out of sync. Is the callback all I am missing or am I thinking about this in completely the wrong way?
Any help appreciated!
It's asynchronous, but much faster than the fastest possible human click.
Aside from that, you should declare instance variables in componentDidMount, e.g.
componentDidMount: function(){
this.total = 0;
}
... but in this case you probably want to store it in state.
.split returns an array of strings, you want to be using numbers:
range = this.props.range.split('-').map(Number)
Or avoid the strings altogether (prefered) with one of these:
<CalcButtonGroup range={[0, 10]} onClick={this.onValueClicked} />
<CalcButtonGroup range={{from: 0, till: 10}} onClick={this.onValueClicked} />
You have define the total variable for your business logic state. Why not store more information like that?
var Calculator = React.createClass({
previous: 0, // <-- previous result
current: 0, // <-- current display
op: '', // <-- pending operator
getInitialState : function(){
return {
value : '0'
};
},
onValueClicked : function (value) {
var actual;
if(value === '+') {
this.previous = this.current;
this.op = '+';
actual = 0; // start a new number
} else if (value === '=') {
if (this.op === '+') {
actual = this.previous + this.current;
} else {
actual = this.current; // no-op
}
} else {
actual = current * 10 + value;
}
this.current = actual; // <-- business logic state update is synchronous
this.setState({ value : String(actual) }); // <-- this.state is only for UI state, asynchronous just fine
},
render : function () {
return (
<div className="calc-main">
<CalcDisplay value={this.state.value} />
<CalcButtonGroup range="0-10" onClick={this.onValueClicked} />
<CalcOpButton type="+" onClick={this.onValueClicked} />
<CalcOpButton type="=" onClick={this.onValueClicked} />
</div>
)
}
});
The basic idea to resolve this.state is use other variables to store your business logic state, and reserve this.state only for UI state.
PS. A real calculator has more complex business logic than this. You should define every state and state machine clearly in spec.

Categories