I am trying with React to do a validation, with a footer which has several buttons, then each one has its value (home, orders, payments, among others), I want that when it is located in one of them, it will be check (I already have that in css), I have not managed to make the correct setState to achieve it.
interface State { value: any, isActive: boolean}class Footer extends React.PureComponent<Props, State>{ state: State = { value: '', isActive: false } render() { const { isActive } = this.state return (<IonFooter><div className="footer-menu-home"><button value="home" onClick={() => this.props.history.push('/home')}> {isActive && (<div><img src={iconHomeActive} alt="" /></div> )} {!isActive && (<div><img src={iconHomeInactive} alt="" /></div> )} ...</button> <button onClick={() =>this.props.history.push('/orders')} ><div><img src={iconOrderInactive} alt="" /></div> Orders</button></div></IonFooter> ); }}
Basically, when he's on any of those, show him as active, only where he's standingI don't know how to tell it or how to make the example stand on orders take the value of the property that I pass by button