score:2
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);
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.
Source: stackoverflow.com
Related Query
- Replacing true/false/null in React Map render with strings "true/false/null"
- How to render images with React JS using map or loop?
- How to check if state default boolean false is changing to true with React Hook useEffect
- React with react-router: render component by replacing content in an element
- How can I conditionally render elements with React and Firebase via map function?
- React nested map sequential render with setTimeout
- How to pass conditionally a true or false to React boolean props with typescript?
- React Component Array Map - Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
- How to render jsx in react with condition true and array mapping?
- React map to render with row
- How to set first value in "useState" function to true or false with "useEffect" function React
- React iterate nested arrays/objects with map. Is return mandatory to render each map function?
- Is it possible to query in graphql with null value UUID when @include false or @skip true
- How can I do a ternary operator inside a map with the mapping for the true condition but without the mapping for the false
- Render elements with a wrapper from a map function in react
- Replacing characters between strings with html tags in react
- react memo comparison function with static return true or false
- React with react-redux-firebase isLoaded is true and isEmpty is seemingly false, yet firebase.auth().currentUser is null - what could be the cause?
- I iterate over an array with map and then try to change a boolen of an object from false to true with an onClick. UI doesn't reflect it but log does
- React Nested Map and Filter with conditional render does not work
- How to render react components by using map and join?
- Rendering React components with promises inside the render method
- Jest Enzyme test a React component that returns null in render method
- How target DOM with react useRef in map
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to focus something on next render with React Hooks
- Render Content Dynamically from an array map function in React Native
- React component children detect if empty / null before render
- React select with value null
- with react final-form why is meta.touched always false with third party components?
More Query from same tag
- How granular should Relay/Apollo fragments be?
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- Change background color of Material Ui datepicker
- how to detect previous url path react
- Cherry-pick modules with Rollup and ES Modules?
- Module not found with corresponding type declarations using Typescript with Next.js
- Array value appended instead of new value list display in React
- Generating a dynamic /robots.txt file in a Next.js app
- Data is not Rendering to the Screen in React Project
- Why date show on ios diffrent than show on android in react-native
- Best practices for displaying and managing error messages in React-Redux app
- Select React Input
- Array.map is not a function while the defined constant is array
- How to create admin route using react router v 6
- Why is my react app not navigating to the page when I click the link?
- onClick of both child and parent triggered when child is clicked
- ReactJS: ascii art issue after JSX transformation
- NextJS URL params like React-Router
- How to call a query only on refetch
- Taking React State (object of objects(example inside)) and getting an array of objects to map() for component rendering
- How to avoid coupling when using useReducer?
- Please explain to me this weird React syntax
- React - change state when props are changed
- How flipkart is accessing dom elements for integration testing?
- Why are my variables empty on first click Apollo Client React?
- Setting an image to be the first image the page renders in React
- Manipulate api to show data from a clicked element
- How do I force Update my components in my react code to toggle dark theme to light theme
- Material UI React paper component in nested grid display issues
- getting graphQL error when compiling