Incorporating React, I am attempting to implement a validation feature within a footer containing multiple buttons with unique values such as home, orders, payments and more. My goal is to dynamically display an active state for the button corresponding to the current location (handled in CSS). However, I am struggling with setting the correct setState method to achieve this.
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>
);
}
}
Essentially, I aim to visually distinguish the active button based on the user's current selection. However, I am unsure of how to strategize this behavior or specify the target property when selecting the 'orders' option using a button press.