I have a button that, when she clicked, should change the color of the button to red, I do this by changing the state to update the component class to make it a .red class, thus updating the color, and after 4 seconds it will return to normal . However, somehow it does not update or update the component. My code is:
import React from "react"; import ReactDom from "react-dom"; const app = document.getElementById("app"); class Layout extends React.Component{ constructor(props){ super(props); this.users =[ { name:"user1", world:"88", },{ name:"user12", world:"882", },{ name:"user13", world:"883", },{ name:"user14", world:"884", },{ name:"user14", world:"884", },{ name:"user15", world:"885", },{ name:"user16", world:"886", },{ name:"user17", world:"8867", },{ name:"user18", world:"8868", } ]; this.ulist = this.users.map((user, i) => { var cName = i<5 ? "active":"nonActive"; return <div key = {i} className = {cName}><h4>{user.name}</h4><p>{user.world}</p></div>; }); this.state = { lastUser:4, firstUser:0, errorUp:"", errorDown: "", }; } moveUp(){ this.state.errorUp = "red"; setTimeout(() =>{ this.state.errorUp = ""; },4000); } render(){ return( <div> <i className={"fa fa-caret-up arrow "+ this.state.errorUp} aria-hidden="true" onClick = {this.moveUp.bind(this)}></i> <i className={"fa fa-caret-down arrow "+ this.state.errorDown} aria-hidden="true"></i> {this.ulist} </div> ); } } ReactDom.render(<Layout/>,app);
Why can this happen. And is there any other way to add a class to a component so that it is updated. Thank you for your time;