bvaughn / react-highlight-words

React component to highlight words within a larger body of text
https://bvaughn.github.io/react-highlight-words/
MIT License
2.16k stars 170 forks source link

react dev mode warning in v0.15 #71

Closed asapach closed 5 years ago

asapach commented 5 years ago

70 introduced a regression, which leads to a console warning:

Warning: React does not recognize the `highlightIndex` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `highlightindex` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in mark (created by Highlighter)
    in span (created by Highlighter)
    in Highlighter (created by ...)
    in ...
    ...

Here's the code that produces the warning:

<Highlighter searchWords={[filterValue]} textToHighlight={name} autoEscape={true} />

The problem is that by default highlightTag is <mark> which does not support extra props: https://github.com/bvaughn/react-highlight-words/blob/348a207ed91063c7d99b842bba5cd743c760c19e/src/Highlighter.js#L50

https://github.com/bvaughn/react-highlight-words/blob/348a207ed91063c7d99b842bba5cd743c760c19e/src/Highlighter.js#L107-L112

/cc @pkmoran

bvaughn commented 5 years ago

Oh, yuck 😦 I overlooked this aspect.

I'll fix this behavior in the base library, but it's possible that it will still trigger for anyone that was spreading props on their own DOM elements.

bvaughn commented 5 years ago

Fix published with 0.15.1

Thanks for the report!