Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React does not recognize the 'activeKey' (and 'activeHref') prop on a DOM element

I've been continuously having this warning on my React web application and not sure how I can fix this. I'm pretty new to React and have tried googling my way through, but still haven't ended up in a solution.

Warning: React does not recognize the `activeKey` prop on a DOM element. If 
         you intentionally want it to appear in the DOM as a custom 
         attribute, spell it as lowercase `activekey` instead. If you 
         accidentally passed it from a parent component, remove it from the 
         DOM element.
    in div (created by NavbarForm)
    in NavbarForm (created by Header)
    in ul (created by Nav)
    in Nav (created by Header)
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Header)
    in Header (created by App)
    in div (created by App)
    in App

Here is the code for my Header

import * as React from 'react';
import { Button, FormControl, FormGroup, Nav, Navbar, NavItem} from 'react-bootstrap';

const Header = (props : any) => {
    return (
        <Navbar>
            <Navbar.Header>
                <Navbar.Brand>
                    <NavItem href="/">
                        RedQuick
                    </NavItem>
                </Navbar.Brand>
            </Navbar.Header>
            <Nav>
                <Navbar.Form>
                    <form onSubmit={ props.getRedditPost }>
                        <FormGroup>
                            <FormControl 
                                type="text" 
                                name="subreddit" 
                                placeholder="Subreddit Name..." 
                            />
                        </FormGroup>
                        <Button type="submit">Search</Button>
                    </form>
                </Navbar.Form>                
            </Nav>
        </Navbar>
    );
};

export default Header;

Link to Github repo if its not the header's problem

like image 433
Hyokune Avatar asked Jun 02 '26 12:06

Hyokune


1 Answers

A web search found me this issue, which indicates that putting <Navbar.Form> inside <Nav> is not valid. Looking at the example in the documentation, it may work to just remove the <Nav>.

like image 175
Matt McCutchen Avatar answered Jun 04 '26 04:06

Matt McCutchen



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!