title: Conditionally render <a href> if map value equals specific text
body: <p>I'm rendering a table based on map (data) of maps (column headers). I am unable to add an if condition before <code>item[col.property]</code> as it returns an unexpected value error. </p>
  
  <p>How would I conditionally render an <code>&lt;a href&gt;</code> with the returned <code>item[col.property]</code> value as the href value if the col.heading is equal to 'specifiedHeader'. </p>
  
  <p>I assume the if conditional logic would be, but I'm getting the placement wrong: </p>
  
  <pre><code>{if (col.heading == 'specifiedHeader') {
     &lt;td&gt;&lt;a href={item[col.property]}/&gt;&lt;/td&gt;
     }
  else {
     &lt;td&gt;{item[col.property]}&lt;/td&gt;
     }
  }
  </code></pre>
  
  <p><strong>const Table:</strong></p>
  
  <pre><code>  const Table = ({ columns, data }) =&gt; (
      &lt;table className="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            {columns.map(col =&gt; (
              &lt;th key={`header-${col.heading}`}&gt;{col.heading}&lt;/th&gt;
            ))}
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {data.map(item =&gt; (
            &lt;tr&gt;
              {
                columns.map(
                  col =&gt; (
                    &lt;td&gt;
                      {
                        item[col.property]
                      }
                    &lt;/td&gt;
                  ))
              }
            &lt;/tr&gt;
          ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  </code></pre>