CODEWITHSUNDEEP
javascriptreactjssvg
user1486133
user1486133

Reputation: 1487

Correct syntax for props in SVG in jsx

I've created a small React component which is essentially just an SVG being returned.

I want to pass in a fill colour to the React component and make the SVG use this colour.

I'm calling the SVG component as such:

<Icon fillColour="#ff5e3a"/>

Within the Icon component I'm then getting the colour from props:

render() {
        const fillColour = this.props.fillColour;
        return (
            <svg>
                <line fill="${fillColour}" x1="49.91" y1="10.65" x2="89.26" y2="50"/>
            </svg>
        );
    }

However I'm struggling to get the syntax correct in this jsx file as the output HTML is literally showing fill:${fillColour} not the actual colour hex code that was sent and set as fillColour

What is the correct syntax?

Upvotes: 2

Views: 158

Answers (2)

yurii kosygin
yurii kosygin

Reputation: 154

<line fill={`${fillColour}`} x1="49.91" y1="10.65" x2="89.26" y2="50"/>

Upvotes: 2

Brandon Mowat
Brandon Mowat

Reputation: 374

You should be using backquotes instead of double quotes.

<line fill={`${fillColour}`}

Upvotes: 2

Related Questions