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

Jeff McCloud · Accepted Answer · 2017-01-25 16:52:11Z

10

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

answered Jan 25, 2017 at 16:52

Jeff McCloud

5,9671 gold badge22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sandrina-p Over a year ago

Awesome! I was trying to do something similar but failed on ... part. Thanks!

Jeff McCloud Over a year ago

No worries, glad to help! Yes, that spread operator comes in handy!!

CyberAbhay Over a year ago

I my case spread operator is not working and showing unexpected token error

Collectives™ on Stack Overflow

React - how to create attributes dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related