javascript - Conditional rendering is not working as expected in reactjs -


function demo(props){          return(          <div>              {props.boolean && <div>}                <h1>                  hi,many of these kind of dom elements here               </h1>              {props.boolean && </div>}          </div>        )    }    reactdom.render(    <demo boolean="true"/>, document.body  );
<html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>js bin</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <!doctype html>    </head>  <body>    </body>  </html>

here want form tag if prop boolean value true,but not working expected. if use code

   {props.boolean && <div></div>}       <h1>         hi,many of these kind of dom elements here      </h1>     {props.boolean && <div></div>} 

it comes,so if opening , closing tags working.is there way values when tags apart...please help

you're trying something, that's of anti-pattern. might better solution:

function demo(props) {     function mycontents() {         return (             <h1>                 hi,many of these kind of dom elements here             </h1>         );     }      return (         <div>             { props.boolean ?                 <div><mycontents /></div>                 :                 <mycontents />             };         </div>     ); }  reactdom.render(     <demo boolean="true" />, document.body ); 

Comments

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -