remarkablemark/html-react-parser

attributesToProps converts attribute with key name "open" always to value `true`

Closed this issue · 2 comments

import { attributesToProps } from 'html-react-parser';

const OBJ = { open_t: true, open_f: true, open: false, undefined_val: undefined, null_val: null };
console.log('@@ attributesToProps', attributesToProps(OBJ as any));
console.log('@@ OBJ', OBJ);

Snímka obrazovky 2023-11-10 o 13 03 32

Expected Behavior

value open should be false after attributesToProps conversion

Actual Behavior

keyword open for attribute name is hardcoded so that value is always true

Steps to Reproduce

convert object with attribute of name open with any falsy value (false, undefined, null, "")

Reproducible Demo

https://codesandbox.io/s/adoring-waterfall-rcr5fm?file=/src/App.tsx

Environment

"html-react-parser": "^5.0.3",

Keywords

attributesToProps, React, MUI, open, always true, hardcoded, html-react-parser

@michalpuskel thanks for opening the issue! This is expected behavior as the open attribute is a boolean attribute so if the key exists, it will be considered true. See https://stackoverflow.com/a/15261366

Hi, OK thank you for explanation and quick response.

Though it is unfortunate in my use case with MUI Dialog https://mui.com/material-ui/api/dialog/
with required boolean attribute open to show / hide Dialog.

Nevertheless, never mind because I had to hard code Dialog with open true anyway and show / hide it with JS + CSS because rerendering works (or doesn't) the other way in templates than in regular React...

Cheers :)