title: I am trying to render an <img> tag using a ternary operator in my react component, but when I run the code my <img> tag is ignored
body: <p>This is my original code that renders my img tag fine:</p>
  
  <pre><code>    import React from 'react' 
      import './Arena.css'
  
      function Arena({ phase }) {
  
  return (
      &lt;div className='backBoard'&gt;
          &lt;div className='canvas'&gt;
  
          &lt;img style={{height:"320px", width: '280px'}} src= 
     {require('./stickman/11.png')}/&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;)
      }
  
      export default Arena
  </code></pre>
  
  <p>phase = the integer 0 passed down with props..
  I tried this:</p>
  
  <pre><code>import React from 'react' 
  import './Arena.css'
  
  function Arena({ phase }) {
  
  return (
      &lt;div className='backBoard'&gt;
          &lt;div className='canvas'&gt;
  
          {
              phase === 0
              ?
              &lt;img style={{height:"320px", width: 
  '280px'}} 
      src={require('./stickman/11.png')}/&gt;
              :
              "not image"
  
          }
  
          &lt;/div&gt;
      &lt;/div&gt;)
  }
  
  export default Arena
  </code></pre>
  
  <p>When my webpage is rendered, the "not image" string is what the ternary operator returns. Is there a different conditional statement that works for this particular situation? Or maybe a different approach?</p>