score:2

Accepted answer

use the string object to get the string representation https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/string

<li>{key} : {string(value)}</li>

score:0

use array.reduce

let data = {
  "active": true,
  "partition": null,
  "auth": false,
  "valued": "myvalue"
};

let astextdata = object.entries(data).reduce((result, [key, value]) => {
  let item = {}
  switch (value) {
    case null:
      item[key]="null";
      return {...result,...item}
    case true:
      item[key]="true";
      return {...result,...item} 
    case false:
      item[key]="false";
      return {...result,...item}
    default :
      item[key]=value;
      return {...result,...item}
  }
},{});

console.log(astextdata);
also you can cast using string() but if you are use it in render time and you have other value types like integer or floats, may you need to convert them to number again.

score:2

in react/jsx templating, boolean/null/undefined values wont render as they are used for conditional rendering as well.

reference: https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

but you can convert to string and render it?

<h1>{string(true)}</h1>
<h2>{string(false)}</h2>
<h2>{string(null)}</h2>

all the above will render as string.


Related Query

More Query from same tag