I'm totally new to ReactJS, but I love its awesome performance over AngularJS. My question is, in AngularJS we use filters in the view templates before rendering the expression or model, how we can achieve that in ReactJS. Now I'm trying to replace few view parts as React Components(still it is in AngularJS).

For example, now my below angular code works fine to render a emoticon in p tag,

<div ng-init='{messageWithAngularEmoji = "This is a :smile:"}'>

     <p ng-bind="{messageWithAngularEmoji | emoji | to_trusted }"></p>

</div>

In the above example you can see I had used two filters: emoji and to_trusted. How can I achieve this in ReactJS ?

Note: I can't rewrite those filters in React.

I'm totally new to ReactJS, but I love its awesome performance over AngularJS. My question is, in AngularJS we use filters in the view templates before rendering the expression or model, how we can achieve that in ReactJS. Now I'm trying to replace few view parts as React Components(still it is in AngularJS).

For example, now my below angular code works fine to render a emoticon in p tag,

<div ng-init='{messageWithAngularEmoji = "This is a :smile:"}'>

     <p ng-bind="{messageWithAngularEmoji | emoji | to_trusted }"></p>

</div>

In the above example you can see I had used two filters: emoji and to_trusted. How can I achieve this in ReactJS ?

Note: I can't rewrite those filters in React.

• javascript
• angularjs
• reactjs

• I'm not familiar with angular, so I can't give you exact code example but in ReactJS you can write just plain JS code, so find out how Angular changes those filters into function exeuction. Probably in the end it will look as simple as: <p>{emoji(messageWithAngularEmoji)}</p>. – daniula Commented Jan 15, 2015 at 12:07
• The angular code should not have any {, }. – Dmitri Zaitsev Commented Nov 10, 2015 at 15:01

3 Answers 3

After a little search I found the way to retrieve angular filter outside of angular, so in your case this should do a trick:

render: function() {
    var injector = angular.element("div[ng-controller]").injector(); 
    var emoji = injector.get('emojiFilter'); 
    var message = 'This is a :smile:';
    return (
        <div>
            <p>{emoji(message)}</p>
        </div>
    );
}

In angular a filter is just a very contrived way to call a function.

module.filter('emoji', function(){
  return function(x){
    /* stuff */
  };
});

Bees

function emoji(x){
    /* stuff */
};

React is just JavaScript, so you define functions and you use them.

<p>{to_trusted(emoji(messageWithAngularEmoji))}</p>

You probably don't need to_trusted because that's likely referring to SCE, which is part of angular.

This question has already been answered correctly. I want to provide a different perspective using ES6 for any future readers like myself.

Writing a currency filter using ReactJS

currency.js

export default function(value, decimalPosition = 2) {
    return '$' + value
        .toFixed(decimalPosition)
        .replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
}

ponent.js

export default function FundsAmount() {
    let amount = 2345.43

    return (
        <span>{ currency(amount) }</span>
    )
}

This will output:

$2,345.43