Skip to content
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

React does not recognize the isActive prop on a DOM element. #122

Open
TrejoCode opened this issue May 7, 2020 · 6 comments
Open

React does not recognize the isActive prop on a DOM element. #122

TrejoCode opened this issue May 7, 2020 · 6 comments

Comments

@TrejoCode
Copy link

Hello, I found the following error implemented the Tabs, my code is as follows:

React Version:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
import React, { useState, useEffect } from "react";
import { Tabs, Tab, Panel } from '@bumaga/tabs';

const PageExample = () => {

    // Active Tab
    const [index, setIndex] = useState(0);
    
    /**
     * @description Establecer la Tab inicial
    */
    useEffect(() => {
        setIndex(1)
    }, []);

    return(
        <div className="tab-container">
            <Tabs state = {[ index, setIndex ]}>
                <div>
                    <Tab>
                        <div className="align-center">
                            <span className="tab-head cursor-pointer">
                                Tab 1
                            </span>
                        </div>
                    </Tab>
                    <Tab>
                        <div className="align-center">
                            <span className="tab-head cursor-pointer">
                                Tab 2
                            </span>
                        </div>
                    </Tab>
                </div>
                <Panel>
                    <div className="__container">
                        <div className="products wrap">
                            Content 1
                        </div>
                    </div>
                </Panel>
                <Panel>
                    <div className="__container column">
                        Content 2
                    </div>
                </Panel>
            </Tabs>
        </div>
    );
export default PageExample;

Can you help me?

@IvanTsiupa
Copy link

Have the same issue ;(

@marcpozzi
Copy link

Same issue

@RectoVersoDev
Copy link

Same issue..

@dhatGuy
Copy link

dhatGuy commented Jul 27, 2020

Experiencing same issue too

@TaekyungAn
Copy link

Change isActive to $isActive

@jespadas
Copy link

It works if you add $ as decorator.
Ex:
const Container = styled.div' color: ${({ $isactive }) => ($isactive ? "white" : "gray")}; ';
And from container:
<Container $isactive={!!user}>

Source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants