How do I conditionally add attributes to React components

Question

Is there a way to only add attributes to a React component if a certain condition is met     I m supposed to add required and readOnly attributes to form elements based on an Ajax call after render  but I can t see how to solve this since readOnly  false  is not the same as omitting the attribute completely     The example below should explain what I want  but it won t work  Parse Error  Unexpected identifier      var React   require  React       var MyOwnInput   React createClass        render  function               return                 lt div gt                    lt input type  text  onChange  this changeValue  value  this getValue    name  this props name   gt                lt  div gt                             module exports   React createClass        getInitialState  function               return                isRequired  false                         componentDidMount  function               this setState                isRequired  true                           render  function               var isRequired   this state isRequired             return                 lt MyOwnInput name  test   isRequired    required          gt

User · Answer

Here s a way I do it   With a conditional    lt Label                 text  label        type            tooltip  amp  amp    tooltip           isRequired  required          gt    I still prefer using the regular way of passing props down  because it is more readable  in my opinion  in the case of not have any conditionals   Without a conditional    lt Label text  label  type  type  tooltip  tooltip  isRequired  required    gt

User · Answer

Considering the post JSX In Depth  you can solve your problem this way   if  isRequired      return        lt MyOwnInput name  test  required  required    gt         return        lt MyOwnInput name  test    gt

User · Answer

From my point of view the best way to manage multiple conditional props is the props object approach from  brigand  But it can be improved in order to avoid adding one if block for each conditional prop  The ifVal helper  rename it as you like  iv  condVal  cv           You can define a helper function to return a value  or another  if a condition is met     components-helpers js export const ifVal    cond  trueValue true  falseValue null    gt      return cond   trueValue   falseValue    If cond is true  or truthy   the trueValue is returned - or true  If cond is false  or falsy   the falseValue is returned - or null  These defaults  true and null  are  usually the right values to allow a prop to be passed or not to a React component  You can think to this function as an  quot improved React ternary operator quot   Please improve it if you need more control over the returned values  Let s use it with many props  Build the  complex  props object    your-code js import   ifVal   from    components-helpers js      BE SURE to replace all true false with a real condition in you code    this is just an example  const inputProps       value   foo     enabled  ifVal true      true   noProp  ifVal false      null - ignored by React   aProp  ifVal true   my value        my value    bProp  ifVal false   the true text    the false text       my false value     onAction  ifVal isGuest  handleGuest  handleUser     it depends on isGuest value       lt MyComponent     inputProps    gt   This approach is something similar to the popular way to conditionally manage classes using the classnames utility  but adapted to props  Why you should use this approach You ll have a clean and readable syntax  even with many conditional props  every new prop just add a line of code inside the object declaration  In this way you replace the syntax noise of repeated operators        amp  amp              that can be very annoying when you have many props  with a plain function call  Our top priority  as developers  is to write the most obvious code that solve a problem  Too many times we solve problems for our ego  adding complexity where it s not required  Our code should be straightforward  for us today  for us tomorrow and for our mates   just because we can do something doesn t mean we should  I hope this late reply will help

User · Answer

You can use the same shortcut  which is used to add remove  parts of  components   isVisible  amp  amp   lt SomeComponent   gt      class MyComponent extends React Component     render         return          lt div someAttribute  someCondition  amp  amp  someValue    gt

User · Answer

I think this may be useful for those who would like attribute s value to be a function  import   RNCamera   from  react-native-camera          export default class MyView extends React Component         myFunction    myObject    gt            console log myObject type                 render              var scannerProps   Platform OS      ios                           onBarCodeRead   this  myFunction                                                 here you can add attribute s  for other platforms                    return                  it is just a part of code for MyView s layout              lt RNCamera                  ref  ref   gt    this camera   ref                     style    flex  1  justifyContent   flex-end   alignItems   center                      type  RNCamera Constants Type back                  flashMode  RNCamera Constants FlashMode on                      scannerProps                gt

User · Answer

juandemarco s answer is usually correct  but here is another option   Build an object how you like   var inputProps       value   foo     onChange  this handleChange     if  condition    inputProps disabled   true    Render with spread  optionally passing other props also    lt input     value  this is overridden by inputProps          inputProps      onChange  overridesInputProps     gt

User · Answer

If you use ECMAScript nbsp 6  you can simply write like this      First  create a wrap object  const wrap          variableName   true      Then  use it  lt SomeComponent      wrap     gt

User · Answer

Here is an example of using Bootstrap s Button via React-Bootstrap  version 0 32 4    var condition   true   return      lt Button      condition    bsStyle   success            gt       Depending on the condition  either  bsStyle   success   or    will be returned  The spread operator will then spread the properties of the returned object to Button component  In the falsy case  since no properties exist on the returned object  nothing will be passed to the component     An alternative way based on Andy Polhill s comment   var condition   true   return      lt Button bsStyle  condition    success    undefined    gt       The only small difference is that in the second example the inner component  lt Button  gt  s props object will have a key bsStyle with a value of undefined

User · Answer

This should work  since your state will change after the Ajax call  and the parent component will re-render   render   function          var item      if  this state isRequired            item    lt MyOwnInput attribute   whatever     gt        else           item    lt MyOwnInput   gt            return            lt div gt               item           lt  div gt

User · Answer

Let   s say we want to add a custom property  using aria-  or data-   if a condition is true       this props isTrue  amp  amp    aria-name     something here      Let   s say we want to add a style property if a condition is true       this props isTrue  amp  amp   style    color   red

User · Answer

In React you can conditionally render Components  but also their attributes  like props  className  id  and more   In React it s very good practice to use the ternary operator which can help you conditionally render Components   An example also shows how to conditionally render Component and its style attribute   Here is a simple example    x000D   x000D  class App extends React Component   x000D    state     x000D      isTrue  true x000D       x000D   x000D    render     x000D      return   x000D         lt div gt  x000D           this state isTrue     x000D             lt button style    color  this state isTrue    red     blue     gt  x000D              I am rendered if TRUE x000D             lt  button gt  x000D                x000D             lt button gt I am rendered if FALSE lt  button gt  x000D             x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  lt App   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is an alternative   var condition   true   var props       value   foo          condition  amp  amp    disabled  true         var component    lt div      props     gt     Or its inline version  var condition   true   var component        lt div     value  foo             condition  amp  amp    disabled  true         gt

User · Answer

For example using property styles for custom container const DriverSelector   props   gt      const Container   props container    const otherProps              props containerStyles  amp  amp    style  props containerStyles             return        lt Container     otherProps   gt

User · Answer

Apparently  for certain attributes  React is intelligent enough to omit the attribute if the value you pass to it is not truthy  For example  const InputComponent   function         const required   true      const disabled   false       return            lt input type  quot text quot  disabled  disabled  required  required    gt            will result in   lt input type  quot text quot  required gt   Update  if anyone is curious as to how why this happens  you can find details in ReactDOM s source code  specifically at lines 30 and 167 of the DOMProperty js file

[javascript] How do I conditionally add attributes to React components?

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components