Non lambda in React-Router V4 render function

Question

I have a component that i need to pass props into while being rendered using the Route component. The problem is that typescript disallows lambda functions in JSX and i just can't figure out how to rewrite this into an allowed function:

<Route
   key={index}
   exact={true}
   path={item.urlAddress}
   render={() => <DocumentView data={data} />}
/>

I tried this, but it is still being evaluated as a lambda, don't know why:

render={function() { <DocumentView /> }}

Anyone knows how to rewrite it?

Edit: I know this is a linter issure, and i'm looking for the proper way to write this according to ts-lint standards. I know i can add a rule exception, but i want to know how to do this the "proper" way, not adding exceptions every time i encounter a linting problem

ts-lint: "lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)" — Flimzy_Programmer, Oct 04 '18 at 05:46
@melbil This is not a typescript issue You can pass lambdas, the language allows it. You just have a rule in tslint (which enforces best practices) that forbids it. — Titian Cernicova-Dragomir, Oct 04 '18 at 05:54
just one more question, how have you created you app? and what IDE are you using? — Amir-Mousavi, Oct 04 '18 at 05:54
@melbil You can suppress the rule for just the line https://palantir.github.io/tslint/usage/rule-flags/ or disable it completly — Titian Cernicova-Dragomir, Oct 04 '18 at 05:55
I know this is a linter issue, should have made my question more clear, see original question. — Flimzy_Programmer, Oct 04 '18 at 06:39
@Amir-Mousavi app is created using create-react-app --scripts-version=react-scripts-ts (create react app typescript version). Using VS Code for IDE — Flimzy_Programmer, Oct 04 '18 at 06:42

Shubham Khatri · Accepted Answer · 2018-10-04T06:50:27.687

6

You can make a change in the tslint rules to allow for arrow functions in render. However, since you asked an alternative way to write the above. It would be written like

renderDocument = (props) => {
   return <DocumentView data={data} {...props}/>
}
render() {
    return (
        <Route
           key={index}
           exact={true}
           path={item.urlAddress}
           render={this.renderDocument}
        />
    )
}

edited Oct 04 '18 at 06:50

answered Oct 04 '18 at 06:45

Shubham Khatri

270,417
55
406
400

You could read this answer as well, it does explain a lot of things in details https://stackoverflow.com/questions/45053622/how-to-avoid-binding-inside-render-method/45053753#45053753 – Shubham Khatri Oct 04 '18 at 06:52

Non lambda in React-Router V4 render function

1 Answers1