How to use the svg fill url in react - reactjs

Question

Here's the code:
<div className="flex flex-wrap -mx-2 mb-8">
{props &&
props.item.map((data, i) => (
<div
key={i}
className="w-full md:w-1/2 lg:w-1/4 px-2 mb-4 flex rounded justify-center items-center p-2 m-1"
>
<h1>abc</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100px"
height="140"
fill={url(`#color-${i}`)}
viewBox="0 0 30 45"
aria-hidden="true"
style={{ transform: `translate(0, -20px)` }}
>
<defs>
<linearGradient id={`color-${i}`} x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset={`${min(7, threshold)}%`} stop-color="rgb(40, 134, 248)" />
<stop offset={`${data.humidity}%`} stop-color="rgb(255, 0, 0)" />
<stop stop-color="rgb(227, 227, 227)" />
</linearGradient>
</defs>
<path stroke="#2886f8" d="M15 6
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z" />
</svg>
</div>
))}
</div>
What I'm trying to do here is to fill the linearGradient. but the problem is when I try to do this:
<svg fill={url(#color-${i})}>
it doesn't work. the error is Cannot find name 'url'. the choices to import is the import { url } from 'inspector';.
cause the svg it looks like this.

Answer 1

You should interpolate the string templates correctly.
fill={`url(#color-${i})`}
The url is a reference to another identifier in the SVG, in this case, the linear gradient
and
offset={`${Math.min(7, data.threshold)}%`}
min alone isn't a function, be sure to fully quantify it by calling Math.min
Code
<div className="flex flex-wrap -mx-2 mb-8">
{props.item.map((data, i) => (
<div
key={i}
className="w-full md:w-1/2 lg:w-1/4 px-2 mb-4 flex rounded justify-center items-center p-2 m-1"
>
<h1>abc</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100px"
height="140"
fill={`url(#color-${i})`}
viewBox="0 0 30 45"
aria-hidden="true"
style={{ transform: `translate(0, -20px)` }}
>
<defs>
<linearGradient
id={`color-${i}`}
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset={`${Math.min(7, data.threshold)}%`}
stop-color="rgb(40, 134, 248)"
/>
<stop
offset={`${data.humidity}%`}
stop-color="rgb(255, 0, 0)"
/>
<stop stop-color="rgb(227, 227, 227)" />
</linearGradient>
</defs>
<path
stroke="#2886f8"
d="M15 6
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z"
/>
</svg>
</div>
))}
</div>