I’m using an ESlint preset from Next.js which has a rule react/display-name
complains about unnamed components.
I see that a common offender is the renderProps. Is it possible to use React.setDisplayName
to name a render prop? I see that if I define the render prop instead of inlining it in the JSX it uses a named function which appeases the linter.
let renderProp = (renderProps: Button.ConfirmShell.renderProps) =>
<Button
className
intent
onClick={e => {
renderProps.apply(e)
}}>
children
</Button>
<Button.ConfirmShell
confirmButton={<Button
className
intent={Intents.warning_invert}
onClick={_ => {
let _ = dispatch()
}}>
children {`?`->React.string}
</Button>}>
{renderProp}
</Button.ConfirmShell>
I wonder if there is a way to name a JSX inlined function