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
Post a Comment