I am rendering a new form when the button is clicked. So basically I change a state within the component from:
false to true or
null to true
However, it is strange that component does not re-render after the state change
export default class BoardManager extends React.Component{
constructor(){
super();
this.state = {
newForm : null
};
setTimeout(() => {
this.state = {
newForm : true
};
console.log(this.state.newForm);
},1000);
}
render(){
return(
<div>
Some thing here
{this.state.newForm ? <NewBoardForm />: null}
</div>
)
}
}
Help much appreciated!!!
Edit!!! Solution
export default class BoardManager extends React.Component{
constructor(){
super();
this.state = {
newForm : null
};
}
render(){
return(
<div>
<BoardsTable boards={BoardData.boards}/>
<button onClick={() => {
this.setState({
newForm : true
});
console.log(this.state.newForm);
}}>Add New</button>
<button onClick={() => {
this.setState({
newForm : null
});
console.log(this.state.newForm);
}}>Delete</button>
{this.state.newForm ? <NewBoardForm />: null}
</div>
)
}
}
Move the setTimeout call to inside a componentDidMount and use this.setState in there
You have to use this.setState({newForm: true}) instead of this.state = {newForm : true}
And put setState in other lifecycle stages.
You can use this.forceUpdate() at the end of onClick.
Reference:
https://facebook.github.io/react/docs/component-api.html
Related
So I'm trying to simulate the state by clicking a button. The 'before' status seems to have the correct value, but why is the 'after' not displaying the correct value even if the setState is already hit by the code?
class App extends Component {
constructor(){
super()
this.state = {isLoggedIn: false}
this.OnClick = this.OnClick.bind(this);
}
OnClick(){
this.setState(prev =>
{
return (prev.isLoggedIn = !this.state.isLoggedIn);
})
console.log(`After setState value: ${this.state.isLoggedInstrong text}`) // setState is done, why is this.state displaying incorrect value?
}
render()
{
console.log(`Before setState value: ${this.state.isLoggedIn}`)
return <Login isLoggedIn={this.state.isLoggedIn} OnClick={this.OnClick} />
}
}
import React from "react";
class Login extends React.Component
{
render()
{
const {isLoggedIn, OnClick} = this.props;
return (
<div>
<button onClick={OnClick} >{isLoggedIn ? "Log Out" : "Log In"} </button>
</div>
)
}
}
export default Login;
OUTPUT:
"Before setState value: false"
(Initial display, button value is: Log In)
When button is clicked:
"After setState value: false" <------ why false when setState has been hit already? Not real-time update until Render is called?
"Before setState value: true"
(Button value is now: Log Out)
The main problem I see in your code is you’re trying to mutate the state.
this.setState(prev => {
return (prev.isLoggedIn = !this.state.isLoggedIn);
})
You have to merge to the state not mutate it. You can do it simply by returning an object like this.
this.setState((prev) => {
return { isLoggedIn: !prev.isLoggedIn };
});
This will fix all the weird behaviours in your code.
Full Code
App.js
import { Component } from "react";
import Login from "./Login";
class App extends Component {
constructor() {
super();
this.state = { isLoggedIn: false };
this.OnClick = this.OnClick.bind(this);
}
OnClick() {
this.setState((prev) => {
return { isLoggedIn: !prev.isLoggedIn };
});
console.log(`After setState value: ${this.state.isLoggedIn}`);
}
render() {
console.log(`Before setState value: ${this.state.isLoggedIn}`);
return <Login isLoggedIn={this.state.isLoggedIn} OnClick={this.OnClick} />;
}
}
export default App;
Login.js
import { Component } from "react";
class Login extends Component {
render() {
const { isLoggedIn, OnClick } = this.props;
return (
<div>
<button onClick={OnClick}>{isLoggedIn ? "Log Out" : "Log In"} </button>
</div>
);
}
}
export default Login;
CodeSandbox - https://codesandbox.io/s/setstate-is-not-update-the-state-69141369-efw46
try this
this.setState({
isLoggedIn:!this.state.isLoggedIn
})
or
this.setState(prev => ({
isLoggedIn:!prev.isLoggedIn
}))
I'm trying to redirect to the second page on button click. Yet, Im getting cannot read setState of undefined when working the code below.
this.state = {
arr: [],
redirect: false
};
setRedirect() {
this.setState({
redirect : true
})
}
renderRedirect(){
if (this.state.redirect) {
return <Redirect to='/target' />
}
}
render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect}>Redirect</button>
</div>
)}
Add setState inside constructor or define as class property
constructor(props) {
super(props);
this.state = {
arr: [],
redirect: false
}
}
Or
class abc extends Component {
state = {
arr: [],
redirect: false,
}
}
Also
Change function to es6 or use bind
ES6 Solution
setRedirect = () => {
// Code block
}
Constructor
this.state = {
arr: [],
redirect: false
}
function that toggle redirect flag outside constructor
setRedirect=()=>{
this.setState({redirect:true})
}
finally you render method
render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect}>Redirect</button>
</div>
)
}
I think here is issue of binding this if you haven't written setState in constructor. If so then
there are threee ways of changes this so that you setRedirect can have access to this of whole class. (so that it can access state).
binding in render like onClick={()=>this.setRedirect.bind(this)}
binding in constructor like
this.setRedirect = this.setRedirect.bind(this)
last on considering performance the above menthod setRedirect =()=>{}
Because 1,2 creates new function at every render.
You need to bind the setDirect function like this
class App extends React.Component {
state = {
arr: [],
redirect: false
};
setRedirect() {
this.setState({
redirect: true
})
}
renderRedirect(){
if (this.state.redirect) {
return <Redirect to='/target'/>
}
}
render() {
return (
<div>
{this.renderRedirect()}
<button onClick={this.setRedirect.bind(this)}>Redirect</button> //binding here is important
</div>
)
}
}
or you have to use the constructor of class
constructor(props) {
super(props);
this.state = {
arr: [],
redirect: false
}
}
You need to move state inside constructor and bind setRedirect in constructor only.
Few Other answers suggested to bind it directly in render don’t do that. Bind it always in constructor
To fix the issue primarily you need to bind setRedirect function
constructor(props){
super(props);
this.state = {
arr: [],
redirect: false
};
this.setRedirect = this.setRedirect.bind(this);
}
Also Change
<button onClick={this.setRedirect}>Redirect</button>
To
<button onClick={() => this.setRedirect()}>Redirect</button>
Otherwise setRedirect gets called on render so to prevent that use () =>
I have made To-Do list with react, but when I submit new entry, it wont show on the list. I have no clue where the problem is.
class TodoList extends React.Component {
constructor(){
super();
This array doesn't get updated like it should:
this.state ={
items:["item1", "item2"]
};
}
Here I add new task:
addTask = (task) => {
this.setState((prevState) => ({
items: prevState.items.concat([task])
}));
}
render(){
return(
<div>
<AddTodo addNew ={this.addTask}/>
<ShowEntries entries={this.state.items}/>
</div>
)
}
}
class AddTodo extends React.Component {
constructor(){
super();
this.handeAddNew = this.handeAddNew.bind(this);
this.state ={
task: ""
};
}
Here I update the state, it works fine:
update(e){
this.setState({
task: e.target.value
});
}
Here I have passed the addTask function as a prop. This might be where the problem is?
handeAddNew(){
this.props.addNew(this.state.task);
this.setState({
task: ""
});
}
render(){
return(
<div>
<input type="text"
onChange={this.update.bind(this)}></input>
<button onClick={this.handleAddNew}>Add</button>
</div>
)
}
}
ShowEntries class works fine too:
class ShowEntries extends React.Component{
render(){
var list =this.props.entries.map((task) =>{
return <li>{task}</li>
});
return(
<div>
<ul>
{list}
</ul>
</div>
)
}
}
export default TodoList
Any ideas?
You should bind addTask function.
constructor(){
super();
this.addTask = this.addTask.bind(this);
}
Or change addTask to arrow function.
like
addTask = (task) => {
/* add task*/
}
handleAddNew also needs binding.
this.handleAddNew = this.handleAddNew.bind(this);
If you are relying on previous state to update the next state, you must use functional setState in React, like so:
addTask = (task) => {
this.setState((prevState) => ({
items: prevState.items.concat([task])
}));
}
That, along with binding all functions used (preferrably inside the constructor itself), should solve your issue.
you misspelled handeAddNew.
make it handleAddNew also make sure you bind your methods handleAddNew = () => { //code }
In React I am trying to make a button increment a value stored in state.
However using the code below function my value is set undefined or NaN when using handleClick.
class QuestionList extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick = (prevState) => {
this.setState({value: prevState.value + 1});
console.log(this.state.value)
}
Can you tell me why this is happening? it should be correct according to the docs here:
https://facebook.github.io/react/docs/state-and-lifecycle.html
Because you are using the handleClick function incorrectly. Here:
handleClick = (prevState) => { .... }
prevState will be an event object passed to handleClick function, you need to use prevState with setState, like this:
handleClick = () => {
this.setState(prevState => {
return {count: prevState.count + 1}
})
}
Another issue is, setState is async so console.log(this.state.value) will not print the updated state value, you need to use callback function with setState.
Check more details about async behaviour of setState and how to check updated value.
Check the working solution:
class App extends React.Component {
constructor(props){
super(props);
this.state={ count: 1}
}
onclick(type){
this.setState(prevState => {
return {count: type == 'add' ? prevState.count + 1: prevState.count - 1}
});
}
render() {
return (
<div>
Count: {this.state.count}
<br/>
<div style={{marginTop: '100px'}}/>
<input type='button' onClick={this.onclick.bind(this, 'add')} value='Inc'/>
<input type='button' onClick={this.onclick.bind(this, 'sub')} value='Dec'/>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
<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>
<div id='container'></div>
set state is async so you wont see the value update when the console.log happens. You should have the state value printed out on the UI so you can see whats happening. To fix the console log try this.
class QuestionList extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0};
}
handleClick = (prevState) => {
this.setState({value: prevState.value + 1}, () => {
console.log(this.state.value)
});
}
NOTE: when you define an inline lambda (arrow function) for a react class this is bound correctly so you dont need to bind it in the constructor.
also you can change the way you pass the previous number if its just a state increment like this
handleClick = () => {
this.setState({value: this.state.value + 1}, () => {
console.log(this.state.value)
});
}
Hello there, try these codes to increment your value
class Counter extends React.Component{
constructor(props){
super(props);
this.addOne = this.addOne.bind(this);
this.state = {
count : 0
}
}
addOne() { // addOne as HandleClick
this.setState((preState) => {
return {
count : preState.count + 1
};
});
}
render() {
return (
<div>
<h1>Count : {this.state.count}</h1>
<button onClick={this.addOne}>+1</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('YOUR-ID'));
class SkuVariantList extends React.Component {
constructor(props) {
super(props)
this.state = {
clicks: 0
};
this.clickHandler = this.clickHandler.bind(this)
}
componentDidMount() {
this.refs.myComponentDiv.addEventListener('click', this.clickHandler);
}
componentWillUnmount() {
//this.refs.myComponentDiv.removeEventListener('click', this.clickHandler);
}
clickHandler() {
var clk = this.state.clicks
this.setState({
clicks: clk + 1
});
}
render() {
let children = this.props.children;
return (
<div className="my-component" ref="myComponentDiv">
<h2>My Component ({this.state.clicks} clicks})</h2>
<h3>{this.props.headerText}</h3>
{children}
</div>
);
}
}
Try this out
class QuestionList extends React.component {
constructor(props){
super(props)
this.state = {
value : 0
}
}
handleClick(){
this.setState({
value : this.state.value + 1
})
}
render(){
return( <button type="button" onClick={this.handleClick.bind(this)}> {this.state.value} </button> )
}
}
Note that when you set a state, it triggers the render function, which will reflect the current state. Try it out in the browser!
import React from 'react'
class App extends React.Component{
constructor(){
super()
this.state = {
count: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
render(){
return(
<div style = {{display: 'flex', fontSize: 30, flexDirection: 'column', alignItems:'center'}}>
<h1>{this.state.count}</h1>
<button onClick = {this.handleClick}>Change</button>
</div>
)
}
}
export default App
This is the shortest code for that. First, initialize the state, then perform a method to increment.
state = {
counter: 0
}
increaseHandler = () => {
let counter = this.state.counter
counter += 1
this.setState({counter: counter})
}
You can do it this way also where we do both increment and decrement operation with same function making it more modular and redable
class CounterApp extends React.Component{
constructor(){
super();
//here count is initially assigned with 0
this.state ={
count:0
}
}
//when we click Increment or Decrement +1 or -1 is passed to step and the value gets changed it gets updated to the view
increment = (step) =>{
this.setState({
count:this.state.count + step
})
}
render(){
const { count } = this.state;//same as const count = this.state.count;
return(
<div>
<div className="counter-app">
<h2 className="value">{count}</h2>
<button onClick={() => this.increment(+1)}>Increment</button>
<button onClick={() => this.increment(-1)}>Decrement</button>
</div>
</div>
)
}
}
I have an overlay which is launched from another React component which have a button that also changes itself. The change happens when the user clicks the button, then the button changes it's classname. It also sends a prop value to the children component which is the overlay. The overlay adds a class depending on the property and if it is clicked. Everthing is working pretty nice, but now I have to do another thing. When a user click on the overlay, it have to close up. Before this change, everything was working for the button I mentioned earlier.
Well this is the button component:
export default class StatusBarButton extends React.Component {
constructor(props) {
super(props)
this.state = {active: false}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({ active: !this.state.active });
}
render() {
var cx = require('classnames');
var button = cx ({
'statusbar-button-container' : true,
'active' : this.state.active
});
var animation = cx ({
'statusbar-button-cross-image' : true,
'rotate' : true,
'active' : this.state.active
});
return (
<div className="astatusbar-center-wrapper">
<div className={button} onClick={this.handleClick}>
<img src="images/navbar-element-icon-cross.png" className={animation}/>
</div>
<OverlayView isOpen={this.state.active} />
</div>
);
}
}
And this is the Overlay at the moment:
export default class OverlayView extends React.Component {
constructor (props){
super(props);
this.state = {open: false}
this.setState({ open: this.props.isOpen });
}
render() {
var cx = require('classnames');
var overlay = cx({
'overlay': true,
'overlay-slidedown': true,
'open': this.state.open
});
return (
<div className={overlay} onClick={this._closeOverlay}>
<div className="overlay-menu-wrapper">
<OverlayNewInvoiceButton />
<OverlayNewBudgetButton />
<OverlayNewTicketButton />
</div>
</div>
);
}
}
As you see I'm trying to get the prop value and assign it to the state, but it's not working. How can I assign the prop value to the state and use it?
Regards,
JP
You are missing componentWillReceiveProps(props) method in your OverlayView component.
export default class OverlayView extends React.Component {
constructor (props){
super(props);
this.state = {open: props.isOpen}
}
componentWillReceiveProps(props) {
this.setState({open: props.isOpen});
}
render() {
let open = '';
if (this.state.open === true) {
open = 'open';
}
let overlayClass = `overlay overlay-slidedown ${open}`;
return (
<div className={overlayClass} onClick={this._closeOverlay}>
<div className="overlay-menu-wrapper">
<span>{open}</span>
</div>
</div>
);
}
}
Full working example:
https://codesandbox.io/s/35wLR4nA
constructor(props, context) {
super(props, context);
this.state = {
value: ''
};
}
componentWillReceiveProps(){ //this is called to before render method
this.setState({
value:this.props.data
})
You're problem might be that you are trying to fetch the class props with this. I think you are supposed to use the props passed into the constructor.
Like this:
constructor (props){
super(props);
this.state = {open: false}
this.setState({ open: props.isOpen });
}
Not sure why you aren't doing it in one line like this though: this.setState = { open: props.isOpen };
Finally i conserved the property which changes the class, is not bad that way. and i fixed with the help of this: Pass props to parent component in React.js and of course the help of a work mate. the end version is this:
This is the parent:
export default class StatusBarButtonView_Profit extends React.Component {
constructor(props) {
super(props)
this.state = {active: false}
this._openOverlay = this._openOverlay.bind(this)
this._closeOverlay = this._closeOverlay.bind(this)
}
_openOverlay() {
if (this.state.active == false) {
this.setState({ active: true });
console.log('boton lanza overlay');
} else {
this.setState({ active: false });
console.log('boton cierra overlay');
}
}
_closeOverlay(Overlay) {
if (this.state.active == true) {
this.setState({ active: false });
} else {
this.setState({ active: true });
}
}
render() {
var cx = require('classnames');
var button = cx ({
'aui-profit-statusbar-button-container' : true,
'active' : this.state.active
});
var animation = cx ({
'aui-profit-statusbar-button-cross-image' : true,
'rotate' : true,
'active' : this.state.active
});
return (
<div className="aui-profif-statusbar-center-wrapper">
<div className={button} onClick={this._openOverlay}>
<img src="images/aui-navbar-element-icon-cross.png" className={animation}/>
</div>
<OverlayView_Profit isOpen={this.state.active} onClick={this._closeOverlay}/>
</div>
);
}
}
this is the child:
export default class OverlayView_Profit extends React.Component {
constructor (props){
super(props);
}
_closeOverlay() {
this.props.onClick();
}
render() {
var cx = require('classnames');
var overlay = cx({
'aui-overlay': true,
'aui-overlay-slidedown': true,
'open': this.props.isOpen
});
return (
<div className={overlay} onClick={this._closeOverlay.bind(this)}>
<OverlayNewInvoiceButtonView_Profit />
<OverlayNewBudgetButtonView_Profit />
<OverlayNewTicketButtonView_Profit />
</div>
);
}
}
now everything works fine.