React: adding if directive

[yousefelgoharyx]

if you added if directive to any element for showing the element or not that would be better than making a js expression in my opinion

regular way

const App = (props) => {reactif={true}
    let name = props.name;
    return (
        <div >
            {name === 'koko' ? <div className="yousef">{name}</div> : null}
        </div>
    )
}

ReactDOM.render(<App name="koko" />, document.getElementById('app'))

my way ( i edited the react file btw and it worked )

const App = (props) => {
    let name = props.name;
    return (
        <div >
            <div className="yousef" reactif={name === 'koko'}>{name}</div> 
        </div>
    )
}

ReactDOM.render(<App name="koko" />, document.getElementById('app'))

mmm
i hope you talk that into consideration
i mean less than 1kb will not make difference :"D

React code

var RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
  reactif: true
};

if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    // i added that
    if (config.reactif){
      reactif = config.reactif
      if (reactif === false){
        return null
      } else if (reactif !== true || reactif !== false){
        console.error('reactif expression didn\'t return bolean value')
      }
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    for (propName in config) {
      if (hasOwnProperty$1.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
        props[propName] = config[propName];
      }
    }
 }

[markerikson]

This has been suggested numerous times, and always been turned down. React assumes you will use normal JS for flow control, not any sort of "directive"-type attributes. There are various third-party libraries that supply components like <If>, but I feel safe in saying this will not be something that's built into React.

[dmytro-lymarenko]

No, please no, we do not need ditectives! I like React as it allows me to write vanilla js which is very flexible!

[yousefelgoharyx]

Yeah I think third-party libs are the solution but for me writing js expression in return is limited I know I can write js before return but sometimes I feel that's just extra and not clean code

[threepointone]

As mentioned, this has come up various times before, and goes against React's "just javascript" paradigm. A problem with proposals like this, is that it doesn't prevent evaluation of expressions passed to children. So for example you'd write code like this -

<div reactif={typeof name === 'string'}>{name.toLowerCase()}</div> 

js would try to run name.toLowerCase() even if name was null, throwing an error in the process.

You could then suggest wrapping the contents at compile time... but then you eventually reinvent javascript. Might as well already use it :)

Closing this issue.