How we can use pipes in React JavaScript?

Expressions within {} in JSX are just plain JavaScript. | is bitwise OR. There are no Angular-like "pipes". A JavaScript function achieves the same thing, though.

Alternatively, to get memoisation, try the new useMemo() hook


There are simply no pipes, because anything evaluated in the brackets is considered plain JavaScript. Because this is evaluated as plain javascript, there is simply no need for pipes. If this.state.variable is a string, I can use the .toUpperCase() prototype to display the string in all uppercase:

{this.state.variable.toUpperCase()}

This would be functionally equivalent to UpperCasePipe:

{{variable | uppercase}}

It's easy enough to just create a wrapper function, and use that. For example, if you wanted to create a custom function to uppercase just the first letter, we can use this function from here:

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

We then would call it like so:

{capitalizeFirstLetter(this.state.variable)}