"React does not recognize the prop on a DOM element" in React Router

Question

React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is the code in question:

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    NavLink
} from "react-router-dom";
import "./AdminPage.css";

export default class AdminPage extends React.Component {
    render() {
        return (
            <div>
                <Router>
                    <nav>
                        <ul className="nav nav-tabs">
                            <li className="nav-item">
                                <NavLink to="/admin/books" className="nav-link" activeClassName="active">Books</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/branches" className="nav-link" activeClassName="active">Branches</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/members" className="nav-link" activeClassName="active">Members</NavLink>
                            </li>
                        </ul>
                    </nav>
                    <Switch>
                        <div> <!-- this appears to be the element that is receiving a "computedMatch" property -->
                            <Route exact path="/admin/books">
                                Books
                            </Route>
                        </div>
                    </Switch>
                </Router>
            </div>
        )
    }
}

Answer 1

because Switch passes computedMatch to the first child that meets one of 2 conditions:

1. has either a path or a form prop that matches the current location.
2. has none of these 2 props (path, form)

The element in question in your code is that div.

Inside the render method of Switch.js, you will see this:

React.Children.forEach(this.props.children, child => {
  if (match == null && React.isValidElement(child)) {
    element = child;

    const path = child.props.path || child.props.from;

     match = path
       ? matchPath(location.pathname, { ...child.props, path })
       : context.match;
   }
 });

return match
  ? React.cloneElement(element, { location, computedMatch: match })
  : null;

And since computedMatch isn't a legal DOM attribute/property, you get the warning.

Unknown Prop Warning

Answer 2

Only when running the Jest test would I encounter this warning.

render(<Popup><div>test</div></Popup>);

The Poupup React component uses React.cloneElement in its implementation to pass props down into the rendered child. In the test since I was passing a regular HTML element the props contained unrecognised HTML properties.

The fix was to render the test with a proper React element instead:

const TestElement = () => <div>test</div>
render(<Popup><TestElement /></Popup>);