reactjs


How to use jsx-control-statements in reactjs?


Im using jsx-control-statements in react app to add basic control statements. I've installed the same using npm and updated the .babelrc file as below
{
"presets": ["react"],
"plugins": ["jsx-control-statements"]
}
and I've the below jsx code
<IF condition={ selectedID !== null }>
{this.renderData()}
</IF>
below is the function to initiate the selectID, I want to execute the renderData() only if the value not equal to null
getInitialState() {
return {
selectedID: null
}
},
As of now Im getting a console error saying "Uncaught ReferenceError: IF is not defined" and the app is not loading. Can anyone tell me anything wrong here. Need help.
The best way to use jsx-control-statements in reactjs is NOT to use it at all. Why? because in my company we had it in our project and it only brought us unreadable, buggy and cluttered code.
Just think for a second you are encouraging moving business logic into your view component's jsx part which only should be used to output your already processed data. At first, it may look good but after a while, more and more logic will go there and it will become a problem.
So in your case what you can do is something like this:
{selectedID !== null && this.renderData()}

Related Links

Workaround for passing function to ipcMain and back using React, Redux, Electron
react-addons-update - How to insert an object deep within array of objects?
How to pass the navigator object to the components used in the react natives root file?
Redux global solution for Cannot read property of undefined in mapStateToProps if store is not yet hydrated
react native how to check if Component current show in screen
How can i create a separate chunk for each component?
How do I upgrade React from 0.13 to 15.0.1?
Why can't I set React component state in a life Cycle method
Not able to set state in componentWillReceiveProps in React
How to update the table content of using React bootstrap table?
html tags does not work inside jsx made tags
How to use gulp with browserify for React project
Material-ui React components not working
React Router no input file specified
Why React event handler is not called on dispatchEvent?
InputText bottom border disappears automatically all of sudden

Categories

HOME
logging
stata
macros
netty
mysqli
azure-eventhub
spotfire
bitbucket
esxi
comments
handlebars.js
virtualenv
derby
minimum
jsfiddle
facebook-marketing-api
internet-explorer-7
orange
google-street-view
printf
django-rest-auth
passbook
react-jsx
openoffice-basic
ajaxcontroltoolkit
polybase
bootstrap-accordion
oracle10g
symlink
windows-10-mobile
selenium3
unity3d-5
circle
microstrategy
nsdateformatter
file-descriptor
autodesk-data-management
contenteditable
uitextview
nshttpurlresponse
risc
runtime-permissions
vertex
timex
breadcrumbs
glade
consolidation
eclipse-mars
dbi
hdr
konakart
hfp
patching
diameter-protocol
datamodel
nslocalizedstring
producer-consumer
properties-file
euro
grails-3.0.9
httpmodule
firebase-tools
chunks
sony-xperia
nsq
cordova-3
pnunit
xts
visual-c#-express-2010
nspopupbutton
opencobol
azure-caching
new-operator
elixir-framework
xtify
svg-android
nsnumber
objectdatasource
android-library
cocotron
mysql2
qt5.1
ncml
teamsystem
jquery-1.8
reflexil
wxperl
advanceddatagrid
apache-commons-email
log-shipping
lightopenid
nstoolbar
oaw
qprocess
dynamic-scope
managed-code
asp.net-1.1
paperless

Resources

Encrypt Message