Skip to content

Fix void element bug and add key parameter to replace method #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 29, 2016

Conversation

remarkablemark
Copy link
Owner

Fixes #14

Bug:

  • The parser converts void elements like <img> into DOM nodes like below:
{
    type: 'tag',
    name: 'img',
    attribs: {},
    children: [], // should be `null`
    next: null,
    prev: null,
    parent: null
}
  • So when React.createElement('img', {}, []) is called, it gives the following error:
Invariant Violation: img is a void element tag and must neither have `children`
nor use `dangerouslySetInnerHTML`.

Fix:

Features:

Chore:

  • Update README.md with updated instructions and examples on replace
  • Update tests, mocks, and test helpers

The error came from the fact that `props.children` would always
be at minimum an empty array `[]`.

This causes the following error:
```js
ReactDOMServer.renderToString(
    Parser('<img />')
);
// Invariant Violation: img is a void element tag and must neither
// have `children` nor use `dangerouslySetInnerHTML`.
```

The fix was to make `props.children` equal to `null` unless
there were actually more DOM nodes inside the array.

Add tests to confirm that void HTML element tags no longer throws
an error.
`render` is an alias for `ReactDOMServer.renderToStaticMarkup`

Update `render` function to check that the first argument is a
valid React element; otherwise, throw an error.
The `replace` method now has 2 parameters:
1. domNode - The object describing the DOM node.
2. key     - The array index.

The `key` parameter was added because if the element had siblings,
then the replaced React element should have a unique "key" prop
or else React will display a warning:

> Warning: Each child in an array or iterator should have a
> unique "key" prop. See https://fb.me/react-warning-keys for
> more information.

Updated the mock data for complex html and used the `key` parameter
to fix a test.
Add new parameter `key` and update examples.
@remarkablemark remarkablemark self-assigned this Aug 29, 2016
@coveralls
Copy link

Coverage Status

Coverage remained the same at 89.474% when pulling e3c91ac on bug-void-element into 15d92ab on master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants