Modern ES6 syntax of destructuring becomes popular between JavaScript developers:
const { a, b = defaultValue, c } = props;React developers also start using this technique, especially for functional components:
const component = ({ index, data = 0, onClick }) => {
...
}
But a new problem (beside unreadable code…) appears:
How to access props.children and other sub-properties that were not extracted?
The solution is simple, use …spread JavaScript syntax!
const component = ({ index, data = 0, onClick, ...props }) => {
...
<li key={index} onClick={onClick.bind(data)}>
{props.children}
</li>
...
}
This is the shortest single line solutions to unpack properties and access the rest of object’s data at the same time!
Anyway, you can always roll back to readable JS code, just add a single line:
const component = (props) => {
const { index, data = 0, onClick } = props;
...
<li key={index} onClick={() => onClick(data)}>
{props.children}
</li>
...
}
