I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to implement the highlight movement for each selection but encounter an issue when the user navigates back to the top of the hierarchy; it retains the last highlight state.
For instance, if the hierarchy consists of country, state, city and I pick USA, California, LA. If I choose a different country, then return to USA, California remains highlighted. How can I update the class name across all columns?
I understand there are similar discussions on bubbling up state, but I haven't been able to apply them to my situation as I need to go one child level deeper than usual examples.
Code structure: App.js, LocationList.js, Location.js
LocationList.js
class LocationList extends Component {
constructor(props){
super(props);
this.state = {
title: props.title,
clicked: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(selectedItem) {
this.props.onListClick(selectedItem)
this.setState({clicked: selectedItem})
}
isSelected(location){ //current selected item is highlighted
if(location.LocationId === this.state.clicked.LocationId){
return 'highlight'
}
else {return 'no_highlight'}
}
return( ..//other info..
<Location
location={location}
key={location.LocationId+location.LocationName}
tier={this.props.level}
handler={this.handleClick}
highlightClass={this.isSelected(location)}
/>
Location.js
class Location extends Component {
constructor(props) {
super(props);
this.state={
locationsList: props.locationList
}
this.onClick = this.onClick.bind(this);
}
onClick(selectedItem) {
this.props.handler(this.props.location);
};
render() {
let location = this.props.location;
console.log(this.props)
return(
<div
id="item"
style={locationStyle}
key={location.LocationId}
value={location.Name}
level={location.Level}
onClick={this.onClick}
className={this.props.highlightClass}
>
{location.LocationName}
</div>
);
}
}
App.js - this is where I'm stuck
handleClick(selectedItem) {
// See value user clicked
console.log('Selected location: ', selectedItem)
}
render() {
return(
<div className="row">
<LocationList key="1" level="1" title="Country" lis={this.state.column Tier1} onListClick={this.handleClick}/>
<LocationList key="2" level="2" title="State" lis={this.state.column Tier2} onListClick={this.handleClick}/>
<LocationList key="3" level="3" title="City" lis={this.state.column Tier3} onListClick={this.handleClick}/>
</div>
);
}
App.css
.no_highlight {
background-color: transparent
}
.highlight {
background-color: #007dc34d
}