title: JSX fragment has no corresponding closing tag
body: <p>I am trying to conditionally render some elements if the conditions equal true. But from my understanding it is giving me a &quot;parsing error: adjacent JSX  elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;...&lt;/&gt;?&quot; right at line 35 at  and below. I have my entire code wrapped in a React.Fragment tag. Please help. I'm not understandign why I am getting this error.</p>
  <pre><code>import './ProfilePage.css';
  import JournalCard from '../../components/JournalCard/JournalCard';
  import { Link } from 'react-router-dom';
  import userService from '../../services/userService';
  
  class ProfilePage extends Component {
      constructor(props) {
          super(props)
      }
      render() {
          return(
              &lt;&gt;
              &lt;div className=&quot;profilePage&quot;&gt;
              &lt;div className=&quot;sign&quot;&gt;
               &lt;div className=&quot;zodiac-sign&quot;&gt;{this.props.user.signs}&lt;/div&gt;
                 {this.props.user.signs === this.props.signs.sunSign ? 
                 &lt;div className=&quot;info&quot;&gt;
                  &lt;div&gt;image:{this.props.signs.image}&lt;/div&gt;
                  &lt;div&gt;sign: {this.props.signs.sunSign}
                  &lt;div&gt;Birthdates:{this.props.signs.dates}&lt;/div&gt;
                  &lt;div&gt;Element:{this.props.signs.element}&lt;/div&gt;
                  &lt;div&gt;Planet:{this.props.signs.planet}&lt;/div&gt;
                 &lt;div&gt;Strengths:{this.props.signs.strengths}&lt;/div&gt;
                 &lt;div&gt;Weaknesses:{this.props.signs.weaknesses}&lt;/div&gt;
                 &lt;div&gt;Likes:{this.props.signs.likes}&lt;/div&gt;
                 &lt;div&gt;Dislikes:{this.props.signs.dislikes}&lt;/div&gt;
                 &lt;div&gt;Compatibility:{this.props.signs.compatiblity}&lt;/div&gt;
                  &lt;div&gt;Lucky Numbers:{this.props.sign.luckyNumbers}&lt;/div&gt;
                  &lt;/div&gt;
                  :
                  &lt;&gt;&lt;/&gt;
                 }
              &lt;/div&gt;
              &lt;div className=&quot;horoscope&quot;&gt;
                  &lt;h2&gt;Horoscope&lt;/h2&gt;
                  {this.props.user.signs === this.props.horoscopes.sign.name ? 
                  &lt;div className=&quot;horoscope-display&quot;&gt;{this.props.horoscopes.result.description}&lt;/div&gt;
                  :
                  &lt;&gt;&lt;/&gt;
              }
              &lt;/div&gt;
              &lt;div className=&quot;journal&quot;&gt;
                  &lt;h3&gt;Journal&lt;/h3&gt;
                  &lt;div id=&quot;journal-box&quot;&gt;
                      &lt;div className=&quot;journal-display&quot;&gt;
                          {this.props.journals.map(journal =&gt; 
                              &lt;JournalCard
                                  key={journal._id}
                                  journal={journal}
                                  handleDeleteJournal={this.props.handleDeleteJournal}
                              /&gt;
                          )}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;
                  &lt;Link className=&quot;btn pink lighten-1&quot;
                      to={{ pathname: '/journal' }}&gt;
                          Add Journal Entry
                  &lt;/Link&gt;
                  &lt;br/&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;/&gt;
          )        
      }
  }
  
  
  export default ProfilePage;```
  </code></pre>