title: I have a problem using the Ternary Operator in React.js
body: <p>I have a page that is supposed to generate sections automatically. Everything transfers fine except the ternary operator.</p>
  <p><strong>The data I using:</strong></p>
  <pre><code>carList = [
      {
          id: 0,
          brand: &quot;Lorem&quot;,
          model: &quot;Lorem&quot;,
          dealer: &quot;Lorem&quot;,
          main_image: &quot;Lorem&quot;,
          sections: [
              {
                  id: 0,
                  section_type: &quot;&quot;,
                  section_title: &quot;Lorem&quot;,
                  section_text: &quot;Lorem Lorem Lorem Lorem Lorem&quot;,
                  image_left: &quot;Lorem1.png&quot;,
                  image_center: null,
                  image_right: null
              }
         ]
    }
  </code></pre>
  <p><strong>IMPORTANT: The data is entered manually, it is not imported from JSON</strong></p>
  <p>The problem arises when I want to check the ternary operator if &quot;image_left&quot; or &quot;right&quot; is null.</p>
  <p><strong>This is how they are sent:</strong></p>
  <pre><code>const { car_id } = this.state;
  
      const sections = this.carList[car_id].sections.map((section, index) =&gt; (
          &lt;CarContent data={this.carList} car_id={this.state.car_id} section_id={this.carList[car_id].sections[index].id} /&gt;
      ))
  </code></pre>
  <p><strong>And this is how they are received:</strong></p>
  <pre><code>const CarContent = (props) =&gt; {
  const { car_id, data, section_id } = props;
  const section = data[car_id].sections[section_id];
  
  return (
      &lt;div className={section.section_type}&gt;
          &lt;div className=&quot;section_images&quot;&gt;
              {section.image_left !== null ? &lt;div className=&quot;image_left&quot;&gt; // Here &lt; ------
                  &lt;img src={section.image_left} alt=&quot;&quot; /&gt;
              &lt;/div&gt; : &quot;&quot;}
              {(section.image_right !== null) ? &lt;div className=&quot;image_right&quot;&gt; // And here &lt; ------
                  &lt;img src={section.image_right} alt=&quot;&quot; /&gt;
              &lt;/div&gt; : &quot;&quot;}
          &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>The same situation happens when I want to check if eg &quot;section_text&quot; is empty. I just wish that a given component would not show up when it is empty or null</strong></p>