0

I am trying below code which will pull data using rest and bind in table but i want to display message if contact column data is blank in any items tryin below but not working

{this.state.items.map((post,key) =>
    { 
      if(post.Contact=null){
     <div className={ styles.bgstlVisa }><span> Message if contact field is blank.</span></div>
      }
  })}

this is code which bind data in table

{this.state.items.map((post,key) =>
          <div> 
        
        <table className={styles.tableheader} >
<thead>
<th>Country</th>
<th>Contact</th>
<th>Phone</th>
<th>Opening Hours</th>
<th>​Website​</th>
<th>Email</th>
</thead><tbody>
<tr>
<td dangerouslySetInnerHTML={{__html: post.Title}}></td>
<td dangerouslySetInnerHTML={{__html: post.Contact}}></td>
<td dangerouslySetInnerHTML={{__html: post.Phone}}></td>
<td dangerouslySetInnerHTML={{__html: post.OpeningHours}}></td>
<td dangerouslySetInnerHTML={{__html: post.Website}}></td>
<td dangerouslySetInnerHTML={{__html: post.Email}}></td>
</tr>
</tbody>
</table>



          </div>     
          )}
    </div>:<div>  
    <div> 
    {this.state.items.map((post,key) =>
    { 
      if(post.Contact=null){
     <div className={ styles.bgstlVisa }><span> Message if contact field is blank</span></div>
      }
  })}

    <p></p>

        </div>
{/* </div>} */}
    </div>
2
  • Do you want to show this message in table column or below table? Also, your creating table in wrong way, It will create table for each list item. May 26, 2021 at 12:57
  • i want to show message here <div className={ styles.bgstlVisa }><span> Message if contact field is blank</span>
    – kumar
    May 26, 2021 at 12:59

1 Answer 1

1

In Javascript a single equals operator (=) is used for assignment, that is, to assign a value to a variable.

So when you do post.Content = null, you are assigning post.Content to be null.

In order to check if it is null, you have to use either a double equals (==) or a triple equals (===). The difference is that with the double equals (==), Javascript will try to coerce the values to be of the same type before actually comparing them, so for instance:

'1' == 1    // true
1 == 1      // true
'1' == '1'  // true
1 == '1'    // true

however the triple equals does a strict comparison, and does not convert the type when making the comparison:

'1' === 1    // false
1 === 1      // true
'1' === '1'  // true
1 === '1'    // false

It's generally considered a better practice to use the strict comparison (===) because then you won't run into any unexpected results due to the type coercion.

So to check it post.Content is actually null, you want to do

if (post.Content === null)

But - that will only check if it is exactly null. What about if it's undefined, or an empty string? A better way to check if post.Content is just blank, because this will work whether is is null or undefined or an empty string, is to just check if it is not (!) there:

if (!post.Content) {
    // message if post.Content is blank for any reason
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.