I am trying to pass review scores through a few components and i'm struggling to figure out where would be best to convert the result. I would like 9000 reviews to become for example 9,000 reviews when it is displayed. Is there a way I can do this inline where it is passed to the GliderPane component? for example
reviews={node.total_reviews}
to
reviews={node.total_reviews.toLocaleString}
But I get this error
Type '(() => string) | ((locales?: string | string[], options?: NumberFormatOptions) => string)' is not assignable to type 'string'.
Type '() => string' is not assignable to type 'string'.ts(2322)
CustomerReviews.tsx(58, 45): Did you mean to call this expression?
(method) toLocaleString(): string (+1 overload)
Bit tricky as this involves typescript also, Is there an easy way to do this, with a helper function of some sort?
Thanks for any help, I looked at react-number-parse and react-number-format but they seem to require their own component added to the page but I would prefer to have the number conversion happen inline (or calculated as a new variable I can pass) if at all possible?
Sorry I'm a bit lost with all this,
return (
<>
<SectionTitle
title={section.heading}
subtitle={section.subheading}
align="center"
/>
<div className={s.component__carousel}>
<Carousel width={300} height={225} maxVisibleSlides={5} changeOnResize>
{
stats.map(({ node }) => (
<Pane key={`review-stats-${slugify(node.provider)}`}>
<GliderPane
title={node.provider}
starColor={node.colour}
image={node.logo}
score={node.score}
maxScore={node.max_score}
reviews={node.total_reviews}
url={`/customer-reviews/#${slugify(node.provider)}`}
imageHeight={45.35}
/>
</Pane>
))
}
</Carousel>
</div>
<ButtonGroup block>
<Button role="secondary" size="large" to="/customer-reviews/" className={s.component__link}>
Our Customer Reviews
</Button>
</ButtonGroup>
</>
);
};