I am fetching data from an api and display some props of them using mapping and I want to change the width of the accordingly with the value of the props.
<h5>
<span className="viewcount" ref={boxSize}>
{`View Count: ${item.statistics.viewCount}`}</span>
</h5>
For example, this is a prop called "viewcount" from the api item, and I want the width of this component to be 200px when the viewcount prop is a number of 200. How can I acheive it?
P.S.: I'm using react.
150 is the default width
<h5>
<span className="viewcount" ref={boxSize} style={{width: item.statistics.viewCount===200 ? 200: 150}}>
{`View Count: ${item.statistics.viewCount}`}</span>
</h5>
OR if you want to always set the value of viewCount as the width
<h5>
<span className="viewcount" ref={boxSize} style={{width: item.statistics.viewCount}}>
{`View Count: ${item.statistics.viewCount}`}</span>
</h5>