React component tree close previously opened parent node - reactjs

Question

I have created a react component tree for navigation.
You can see it working in the below codepen.
React Component Tree
let navConfigData = {
isDashboardVisible: true,
tierOneLinks: [
{
name: "First Page",
iconName: "star",
iconAbbreviation: "FP",
tierTwoItems: [
{
name: "Tier 2 Page",
iconName: "star",
iconAbbreviation: "FP",
tierThreeItems: [
{
name: "Tier 3 Page",
iconName: "star",
iconAbbreviation: "FP",
path: "#"
}
]
},
{
name: "Tier 2 sec Page",
iconName: "star",
iconAbbreviation: "FP",
path: "#"
}
]
},
{
name: "Second Page",
iconName: "",
iconAbbreviation: "SP",
path: "#"
},
{
name: "Third Page",
iconAbbreviation: "TP",
path: "#",
tierTwoItems: [
{
name: "Tier 2 Page",
iconName: "star",
iconAbbreviation: "FP",
tierThreeItems: [
{
name: "Tier 3 Page",
iconName: "star",
iconAbbreviation: "FP",
path: "#"
}
]
},
{
name: "Tier 2 sec Page",
iconName: "star",
iconAbbreviation: "FP",
path: "#"
}
]
},
{
name: "Fourth Page",
iconName: "send",
iconAbbreviation: "FO",
path: "#"
}
],
supportLinks: [
{
name: "First Support Page",
iconName: "settings",
iconAbbreviation: "FI",
path: "#"
},
{
name: "Second Support Page",
iconName: "security",
iconAbbreviation: "SE",
path: "#"
},
{
name: "Third Support Page",
iconName: "help",
iconAbbreviation: "TH",
path: "#"
}
]
};
class NavigationDrawerTierThree extends React.Component {
onClick = evt => {
this.props.onSelect(this.props.tierThree.name);
};
render() {
const { tierThree, selectedTierThreeLink } = this.props;
debugger;
return (
<a
className="mdc-list-item my-nav-drawer__tier-three"
onClick={this.onClick}
>
<span className="my-nav-drawer__tier-two-label">
{tierThree.name}
</span>
</a>
);
}
}
class NavigationDrawerTierTwo extends React.Component {
// static propTypes = {
// tierTwo: object.isRequired,
// showNavIcon: bool,
// onSelect: func.isRequired,
// selectedTierTwoLink: string.isRequired
// };
state = { tierTwoIsExpanded: false };
onClick = evt => {
debugger;
this.props.onSelect(this.props.tierTwo.name, "tier2");
const { tierTwoIsExpanded } = this.state;
this.setState({ tierTwoIsExpanded: !tierTwoIsExpanded });
};
getArrowIcon = () => {
return this.state.tierTwoIsExpanded ? (
<span class="material-icons cdk-nav-drawer__tier-two-icon">></span>
) : (
<span class="material-icons cdk-nav-drawer__tier-two-icon">
^
</span>
);
};
getAnchorClassBasedOnTier = () => {
return this.props.showNavIcon
? "cdk-nav-drawer__tier-two"
: "cdk-nav-drawer__tier-three";
};
getLabelClassBasedOnTier = () => {
return this.props.showNavIcon
? "cdk-nav-drawer__tier-two-label"
: "cdk-nav-drawer__tier-three-label";
};
render() {
const { tierTwo, showNavIcon, selectedTierTwoLink } = this.props;
const { tierTwoIsExpanded } = this.state;
debugger;
return (
<div>
<a
className="mdc-list-item my-nav-drawer__tier-two"
onClick={this.onClick}
>
{showNavIcon && this.getArrowIcon()}
<span className="my-nav-drawer__tier-two-label">
{tierTwo.name}
</span>
</a>
{tierTwoIsExpanded && this.props.children}
</div>
);
}
}
class NavigationDrawerTierOneAnchor extends React.Component{
// static propTypes = {
// tierOne: object.isRequired,
// onSelect: func.isRequired,
// selectedTierOneLink: string.isRequired
// };
// state = { tierIsExpanded: false };
onClick = evt => {
this.props.onSelect(this.props.tierOne.name, "tier1");
// const { tierIsExpanded } = this.state;
// this.setState({ tierIsExpanded: !tierIsExpanded });
};
render(){
const { tierOne, selectedTierOneLink, expanded } = this.props;
return(
<div>
<a
className="mdc-list-item my-nav-drawer__tier-one"
href={tierOne.path}
onClick={this.onClick}
ref={a => {
this.anchor = a;
}}
>
<span className="cdk-nav-drawer__tier-one-label">
{tierOne.name}
</span>
</a>
{expanded && this.props.children}
</div>
);
}
}
class NavigationDrawerAppTiers extends React.Component {
// static propTypes = {
// tierOneArray: array.isRequired,
// onToggleExpand: func.isRequired,
// onSelect: func.isRequired,
// selectedTierOneLink: string.isRequired,
// selectedTierTwoLink: string.isRequired,
// selectedTierThreeLink: string.isRequired,
// expandedTierOneName: string.isRequired
// };
render(){
const { tierOneArray, onSelect, selectedTierOneLink, selectedTierTwoLink, selectedTierThreeLink, expandedTierOneName } = this.props;
return (
<div className="mdc-drawer__content my-nav-drawer__app-tiers">
<nav className="mdc-list">
{tierOneArray.map((tierOneLink, index) => (
<NavigationDrawerTierOneAnchor
tierOne={tierOneLink}
onSelect={onSelect}
key={index}
expanded={tierOneLink.name === this.props.expandedTierOneName}
selectedTierOneLink={selectedTierOneLink}
>
{(tierOneLink.tierTwoItems || []).map((tierTwoItem, index) => (
<NavigationDrawerTierTwo
tierTwo={tierTwoItem}
onSelect={onSelect}
selectedTierTwoLink={selectedTierTwoLink}
showNavIcon={
(tierTwoItem.tierThreeItems &&
tierTwoItem.tierThreeItems.length > 0) ||
false
}
>
{(tierTwoItem.tierThreeItems || []).map(
(tierThreeItem, index) => (
<NavigationDrawerTierThree
tierThree={tierThreeItem}
onSelect={onSelect}
selectedTierThreeLink={selectedTierThreeLink}
/>
)
)}
</NavigationDrawerTierTwo>
))}
</NavigationDrawerTierOneAnchor>
))}
</nav>
</div>
);
}
}
class NavigationDrawer extends React.Component {
// static propTypes = {
// navConfig: object.isRequired
// };
state = {
isDrawerCollapsed: false,
selectedTierOneLink: "",
selectedTierTwoLink: "",
selectedTierThreeLink: "",
expandedTierOneName: ""
};
onSelect = (selectedLinkName, selectedTier) => {
if(selectedTier == "tier1"){
if (selectedLinkName === this.state.selectedTierOneLink) {
// User clicked on the same link again
this.setState(state => ({
expandedTierOneName: state.expandedTierOneName?"":selectedLinkName
}))
} else {
this.setState(state=>({
expandedTierOneName:selectedLinkName
}))
}
this.setState(state => ({ selectedTierOneLink: selectedLinkName }));
this.setState(state => ({ selectedTierTwoLink: "" }));
} else if (selectedTier == "tier2"){
this.setState(state => ({ selectedTierTwoLink: selectedLinkName }));
this.setState(state => ({ selectedTierThreeLink: "" }));
} else {
this.setState(state => ({ selectedTierThreeLink: selectedLinkName }));
this.setState(state => ({ selectedTierTwoLink: "" }));
}
};
render(){
const { navConfig } = this.props;
return(
<nav className="mdc-drawer mdc-drawer--permanent mdc-typography my-nav-drawer">
<div className="my-nav-drawer__links">
<NavigationDrawerAppTiers
tierOneArray={navConfig.tierOneLinks}
onSelect={this.onSelect}
selectedTierOneLink={this.state.selectedTierOneLink}
selectedTierTwoLink={this.state.selectedTierTwoLink}
selectedTierThreeLink={this.state.selectedTierThreeLink}
expandedTierOneName={this.state.expandedTierOneName}
/>
</div>
</nav>
);
}
}
React.render(
<NavigationDrawer navConfig={navConfigData}/>,
document.body
);
The component is max upto three levels and I don't want it to achieve currently with recursion.
I am looking for a behavior to close the previously opened Parent tree node after selecting any child from another parent tree.
To explain in detail from the Codepen example, I need help on the below scenario.
Currently if no child Items are selected, only One parent node will be toggled.
I need help in achieving the below scenario.
Click on any child Item from First page,
Now clicking on the Third page should not collapse the First Page(since an item is selected from First Page), First Page should collapse when any child item from Third page is selected.
If no child Item is selected from Third page and Third Page is clicked again then all the opened parent nodes (First page and third page) should be collapsed.
Could someone help me with modifying the codpen.
Below code throws initialState is not defined
class NavigationDrawer extends React.Component {
static propTypes = {
navConfig: object.isRequired
};
initialState = this.props.navConfig.tierOneLinks.reduce((acc, { name }) => {
acc[name] = false;
return acc;
}, {});
state = {
expanded: initialState,
isDrawerCollapsed: false,
selectedTierOneLink: "",
selectedTierTwoLink: "",
selectedTierThreeLink: "",
expandedTierOneName: ""
};
onSelect = (selectedLinkName, selectedTier) => {
if(selectedTier == "tier1"){
if (selectedLinkName === this.state.selectedTierOneLink) {
// User clicked on the same link again
this.setState(state => ({
expandedTierOneName: state.expandedTierOneName?"":selectedLinkName
}))
} else {
this.setState(state=>({
expandedTierOneName:selectedLinkName
}))
}
this.setState(state => ({ selectedTierOneLink: selectedLinkName }));
this.setState(state => ({ selectedTierTwoLink: "" }));
} else if (selectedTier == "tier2"){
this.setState(state => ({ selectedTierTwoLink: selectedLinkName }));
this.setState(state => ({ selectedTierThreeLink: "" }));
} else {
this.setState(state => ({ selectedTierThreeLink: selectedLinkName }));
this.setState(state => ({ selectedTierTwoLink: "" }));
}
};
render(){
const { navConfig } = this.props;
return(
<nav className="mdc-drawer mdc-drawer--permanent mdc-typography my-nav-drawer">
<div className="my-nav-drawer__links">
<NavigationDrawerAppTiers
tierOneArray={navConfig.tierOneLinks}
onSelect={this.onSelect}
selectedTierOneLink={this.state.selectedTierOneLink}
selectedTierTwoLink={this.state.selectedTierTwoLink}
selectedTierThreeLink={this.state.selectedTierThreeLink}
expandedTierOneName={this.state.expandedTierOneName}
/>
</div>
</nav>
);
}
}

Answer 1

I'm not going to edit the Codepen and do all the work for you, but I'll give you a general idea of how to achieve your requirements.
Click on any child Item from First page, Now clicking on the Third page should not collapse the First Page
To accomplish this, you need a separate expanded state for each tierOneLinks:
state = {
expanded: {},
};
Then you can use state.expanded[tierOne.name] to check if the tier one panel is expanded, and expand it with
this.setState(prevState => ({
expanded: {
...prevState.expanded, // leave other panels expanded
[tierOne.name]: true,
},
}));
First Page should collapse when any child item from Third page is selected.
To accomplish this, the child item's onClick handler need to call a callback function (from the parent component, passed as props) that does the following:
this.setState({
expanded: {
[tierOne.name] : true, // collapse all other panels
}
})
If no child Item is selected from Third page and Third Page is clicked again then all the opened parent nodes (First page and third page) should be collapsed.
To accomplish this, check if the current page is already expanded, and if so, set all panels to collapsed:
if (state.expanded[tierOne.name]) this.setState({ expanded: {} });
Alternative
Use a Set or array as the state for the list of expanded pages.
You need to create a copy of the previous state when you want to update it.