Conditional rendering in react js(Condition inside one more condition)

Question

Actually i'm trying to hide and show some html elements in react. I have a created a employee form in which we have multiple partitions for example personal information, contact information etc... I created next and previous buttons in form to show and hide other partitions in the form There is a partition in which we have education details to fill, so i chose to keep a plus and minus button to add education details using conditions.

But finally, my problem is like i have complex conditions on **render** function:

{someCondition && <div>
{anotherCondition && <div></div>}
</div>}

But, i'm getting: *Adjacent JSX elements must be wrapped in an enclosing tag error*. So, what i'm supposed to do? 

Answer 1

You have to wrap them in a div first. Also, your syntax looks a bit wrong (you missed a closing }).

{someCondition && (
  <div>
    {anotherCondition && <div></div>}
  </div>
)}

Answer 2

From the code you gave, I believe you need an enclosing tag like this:

//div wraps everything else so the component can render.
<div>
{someCondition && <div>
{anotherCondition && <div></div>
</div>}
</div>