How to show an empty field in the list items instead of NULL in a no framework SPFX?

Question

In the snippet of code from my no-framework SPFX, I'm trying to understand how to not show "NULL" in any of the four fields in the html table. The first three columns are not editable, while the fourth column is an input to allow new/updated data to be submitted.

private _renderList(items: ISPList[]): void {
    let html: string = '<table border=1><th>Name of Client</th><th>Age</th><th>Height</th><th>Recommended Strategy</th>';
    items.forEach((item: ISPList) => {
      html += `    
    <tr>             
        <td>${item.Title}</td>
        <td>${item.Age}</td>
        <td>${item.Height}</td>
        <td><input id="txtRecommendedStrategy" type="text"  value=${item.RecommendedStrategy} /></td>
    </tr>
    `;
    });
  
    html += '</table>';

    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

Answer 1

You can try following code:

private _renderList(items: ISPList[]): void {

  let html: string = '<table border=1><th>Name of Client</th><th>Age</th><th>Height</th><th>Recommended Strategy</th>';
  items.forEach((item: ISPList) => {
    html += `    
      <tr>             
        <td>${item.Title ? item.Title : ''}</td>
        <td>${item.Age ? item.Age : ''}</td>
        <td>${item.Height ? item.Height : ''}</td>
        <td><input id="txtRecommendedStrategy" type="text" value="${item.RecommendedStrategy ? item.RecommendedStrategy : ''}" /></td>
      </tr>
    `;
  });

  html += '</table>';

  const listContainer: Element = this.domElement.querySelector('#spListContainer');
  listContainer.innerHTML = html;
}

By using the conditional rendering logic {item.fieldX ? item.fieldX : ''}, you can ensure that NULL is not displayed in the table when the values are empty or null.