0

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>
            </>
        );
    };
kinsey333
  • 1
  • 1

0 Answers0