To expand upon @FrankerZ's comment, you might want something like this.
I didn't feel like rewriting all of the items by hand, so the example is not quite as massive, but the idea is the same.
As an added bonus, this snippet automatically supports an infinite number of `children` within items and renders them as nested `<ul>`s, but you can naturally change how things get rendered.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const items = [
{
itemName: "Крупногабаритная техника",
itemPath: "/bulky_machines",
children: [
{
itemPath: "/fridges",
itemName: "Холодильники"
},
{
itemPath: "/freezers",
itemName: "Морозильники"
}
]
},
{
itemName: "Встраиваемая техника",
itemPath: "/built_in_appliances",
children: [
{
itemPath: "/fridges",
itemName: "Холодильники"
},
{
itemPath: "/washmachines",
itemName: "Стиральные машины"
}
]
}
];
const Item = ({ item, parent }) => (
<li>
{item.itemName} (parent={parent ? parent.itemName : "none"})
{item.children && item.children.length ? (
<ul>
{item.children.map((child, index) => (
<Item item={child} parent={item} key={index} />
))}
</ul>
) : null}
</li>
);
const App = () => (
<ul>
{items.map((item, index) => (
<Item item={item} parent={null} key={index} />
))}
</ul>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main id="root" />
<!-- end snippet -->
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
