Conditional rendering is not working as expected in reactjs

Question

function Demo(props){


    return(
        <div>
            {props.boolean && <div>}  
            <h1>
                HI,many of these kind of dom elements will be 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 i want to get the form tag if the prop boolean value is true,but its not working as expected. if i use code like this

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

it comes,So if opening and closing tags are together then its working.is there any way to get the values when the tags are apart...please help

{props.boolean && <div></div>} , what you expect to do with this condition? — Álvaro Touzón
– Álvaro Touzón, Commented Jul 25, 2017 at 12:52
What are you trying to do exactly? Why are you using HTML tags to test for truth? — jmargolisvt
– jmargolisvt, Commented Jul 25, 2017 at 12:55
i have some other scenarious where i have to include set of codes in some DOM element if the condition meets... — Abhishek
– Abhishek, Commented Jul 25, 2017 at 12:59
@Álvaro Touzón, i just wrote to show it works if tags are ended like that — Abhishek
– Abhishek, Commented Jul 25, 2017 at 13:00

nAv · Accepted Answer · 2017-07-25 13:58:32Z

1

You're trying to do something, that's somewhat of an anti-pattern. This might be a better solution:

function Demo(props) {
    function MyContents() {
        return (
            <h1>
                HI,many of these kind of dom elements will be here
            </h1>
        );
    }

    return (
        <div>
            { props.boolean ?
                <div><MyContents /></div>
                :
                <MyContents />
            };
        </div>
    );
}

ReactDOM.render(
    <Demo boolean="true" />, document.body
);

answered Jul 25, 2017 at 13:58

nAv

1296 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sain Pradeep · Accepted Answer · 2017-07-25 13:05:18Z

0

Please try Conditional Rendering

function Demo(props) {
    const flag = props.flag;
    return (
        if (flag) {
            return <h1 > true < /h1>;
        }

        return <h1 > false < /h1>;

    )
}

 ReactDOM.render(
  <Demo flag={true}/>,  document.getElementById('root')
);

HTML

<body>
  <div id="root"></div>
</body>

answered Jul 25, 2017 at 13:05

Sain Pradeep

3,1351 gold badge24 silver badges34 bronze badges

Comments

santosh · Accepted Answer · 2017-07-25 13:19:18Z

0

A different and better way to do conditional rendering

function Demo(props) {
    return (
      <h1>{props.flag ? true : false}</h1>;
    )
}

 ReactDOM.render(
  <Demo flag={true}/>,  document.getElementById('root')
);

answered Jul 25, 2017 at 13:19

santosh

5753 silver badges12 bronze badges

Collectives™ on Stack Overflow

Conditional rendering is not working as expected in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related