React - how to create attributes dynamically

Question

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;
 }

Answer 1

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>
    );
}