TroyAlford / react-jsx-parser

A React component which can parse JSX and output rendered React Components.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

any operation inside jsx template gives NaN

sandeep-kr-kgp opened this issue · comments

<div>{[1,2,3].map(e=><span>{e}</span>)}</div> works fine but <div>{[1,2,3].map(e=><span>{e*2}</span>)}</div> does not. Am I missing something ?

Yes - we do not support any form of evaluation inside function declarations within the JSX. Simple functions are the only type supported, as added in #216

This lib does not act as a JS interpreter - so inline function creation is out-of-scope for a variety of reasons for this lib's target, primarily revolving around A) the complexities of evolving syntax and B) security.

To support what you're trying to do, I suggest creating a binding.

<JsxParser jsx="<div>{[1,2,3].map(renderChild)}</div>" bindings={{ renderChild: e => <span>{e*2}</span> }} />

This allows you to control the security implications around renderChild in controlled code.