can't use replaceAll or replace with nextjs/reactjs

Question

I'm using reactjs/nextjs and I'm currently trying to render this component:

const Example = ({data}) => (
<strong>{() => data.slug.replaceAll("-", " ")}</strong>);

I get this error each time:
TypeError: data.slug.replaceAll is not a function.

The type of slug is a string and i checked it out.
I tried using data.slug.toString().replaceAll... that I've found in another stackoverflow answer but I've got the same issue.

I tried using a function istead of direct string ie.: () => data.slug.replaceAll... and this time there was no rendering.

I don't know if it would help, but the data I try to render comes from an api through getServerSideProps function asynchronously.

Answer 1

Most likely because .replaceAll() isn't yet supported in all browsers.

caniuse

For the time being, you can use a simple .replace()

data.slug.replace(/-/g, " ")