Passing a component props and using inside a Swith case

2832 views javascript
1

I've been trying to pass a props (i have a NavigationItem and there i have a "key" propriety) and use that key as as parameter inside a switch case in a cointainer, but it simply gives me a "Undefined" feedback. So here's the component code:

<div className={classes.espacamento}  id="playstation">
                        <NavigationItem key={"playstation"} link="/produtos">
                            Playstation
                    </NavigationItem>
                    </div>

                    <div className={classes.espacamento}  id="xbox">
                        <NavigationItem key={"xbox"} link="/produtos">
                            Xbox
                    </NavigationItem>
                    </div>

I export as a "navigationItens" but that just won't work

import NavigationItens from '../../components/Navigation/Navbar/NavigationItens';

class Produtos extends Component {
    loadProdutosHandler() {
        if (!this.props.produtos) {
        switch(this.props.navigationItens.key) {
            case 'PS4':
                developmentServer.get('jogos')
                    .then(response => {
                        this.props.updateProdutosHandler(response.data.data);
                    });

                console.log("xbox")
                break;

            case 'playstation':
                developmentServer.get('jogos?plataforma=PS4')
                    .then(response => {
                        this.props.updateProdutosHandler(response.data.data);
                    });
                break;

            default:
             developmentServer.get('jogos?plataforma=PS4')
            .then(response => {
                this.props.updateProdutosHandler(response.data.data);
            });
                }
            }
    }

Can someone help me on that? im a react beginner and im very confused right now haha

answered question

key is a reserved prop name. Try to change it.

oops sorry @devserkan I answered the same thing, you're too quick for me :)

No problem @RoseRobertson. This should have been an answer. So, upvoted yours :)

i changed to "item" the old prop "key", but it keeps giving me undefined Also, thanks for the that reserved prop tip, bro!

I just looked at your code again and there are some things that I can't understand. How is the shape of NavigationItens component? What is props.navigationsItens? Since you are trying to get the key property from it? Are they coming from your Redux store? What thing is certain, if you pass a prop to your component like this it can't be undefined since it is just a hardcoded string. Though you don't need here the curly braces, since you are passing a string, but you should get it from your component if there is not any typo or some other mistake like this.

Also, I can't see NavigationItens component anywhere in your code. Produtos component is not related to your question, right?

1 Answer

7

key has a special meaning in react and so when you try to pass it down as a prop your component won’t see it (see: https://reactjs.org/docs/lists-and-keys.html) From the documentation -

If you need the same value in your component, pass it explicitly as a prop with a different name

posted this

Have an answer?

JD

Please login first before posting an answer.