I have 2 attributes connected to 2 props: aria-hidden and aria-label.
When aria-hidden is true, it only shows that one. If it's false, it shows only aria-label.
I wrote this code but it's not DRY... How can I improve it?
render() {
let svgMarkup = '';
if (this.props.hidden) {
svgMarkup = (
<svg role="img" aria-hidden="true">
...
</svg>
);
} else {
svgMarkup = (
<svg role="img" aria-label={ this.props.label }>
...
</svg>
);
}
return svgMarkup;
}
You can set the props on a plain object, then apply the props to your react component using spread syntax:
render() {
const ariaProps = this.props.hidden ?
{ 'aria-hidden': 'true' }
:
{ 'aria-label': this.props.label };
return (
<svg role="img" {...ariaProps}>
...
</svg>
);
}