无法在react.js中的模板字符串中呈现html标签

Question

Googled it but still can't realize how to render html tags in a template string in React:

return (
  <p className="text-left m-3">
     {this.state.movies ? `Showing <strong>`${this.state.movies.length}</strong`> : 
                          `DB is empty`
     }
  </p>
);

Is there any elegant "react way" to fix it?

Answer 1

You can simply make use of span to wrap the elements instead of having them returned as a string

return (
  <p className="text-left m-3">
     {this.state.movies ? <span>Showing <strong>{this.state.movies.length}</strong></span> : 
                          <span>DB is empty</span>
     }
  </p>
);

Answer 2

Few things you are doing wrong in your code. 1. Template literals do not work directly in return, you need to add template literals inside { test ${value} } 2. You have syntax error here ie, template literal should end after ending tag element of strong

 `Showing <strong>`${this.state.movies.length}</strong`>

Do it this way

return (
  <p className="text-left m-3">
     {this.state.movies ? <span>{`Showing <strong>${this.state.movies.length}</strong>`}</span> : 
                          <span>{`DB is empty`}</span>
     }
  </p>
);

OR

Assign template literals to a local variable and call it in return

render(){
   const text = `Showing <strong>${this.state.movies.length}</strong>`;
   const text1 = `DB is empty`;
   return (
     <p className="text-left m-3">
     {this.state.movies ? <span>{text}</span> : <span>{text1}</span>}
     </p>
   )
}

Answer 3

You can simply use like this:

return (
  <p className="text-left m-3">
     Showing 
   {this.state.movies &&
    // I would also make sure its length
     this.state.movies.length > 0 &&
     // to make sure not to print 0
     <strong>this.state.movies.length</strong> 
     || 'DB is empty'}
  </p>
);