Passing props: One of the props `key` is undefined but the other is readable

Question

Here are the files in question:

card-list.styles.css: src -> component -> card-list -> card-list.styles.css

.card-list {
    width: 85vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

card-list.component.jsx: src -> component -> card-list -> card-list.component.jsx

import React from 'react';
import './card-list.styles.css';
import {Card} from '../card/card.component';

export const CardList = (props) => (
    <div className="card-list">
        {props.monsters.map(monster => (
            <Card key={monster.id} monster={monster}/>
        ))}
    </div>
);

card.component.jsx: src -> component -> card -> card.component.jsx

import React from 'react';

export const Card = props => (
    <div>
        {console.log(props.key)}
        <h1>{props.monster.name}</h1>
    </div>
);

App.js: src -> App.js

import React, {Component} from 'react';

import logo from './logo.svg';
import './App.css';
import {CardList} from './component/card-list/card-list.component'
class App extends Component {

  constructor() {
    super();
    this.state = {
      monsters: []
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => this.setState({monsters : users}));
  }

  render () {
    return  (
      <div className="App">
        <CardList monsters={this.state.monsters}/>
      </div>
    );
  }
}

export default App;

Super new to React and Javascript, my question: In card-list.component.jsx, if my terminology is right, I'm passing key and monster as props to Card component. While the monster prop is accessible, the key prop is undefined. Why is the key prop coming in as undefined?

What is the effort I've put in to understand this: I've searched for generic questions asking why props.name is undefined, and there are multiple answers about setState happening asynchronously and componentWillMount returns a promise and is asynchronous.

Why is this not duplicate question if the above answer is right?: Why is ONE of my props monster available for use? but key alone is undefined so not available for use? Why does the asynchronous activity affect one of the props but not the other?

You've done all the work in writing a thorough question. Had you considered creating a runnable snippet? — Mike, Mar 25 '20 at 04:11
@Mike I'm sorry, I followed the format of this question: https://stackoverflow.com/questions/38210938/what-is-the-purpose-of-export-in-react-component-declaration, never posted a JS question before. — ababuji, Mar 25 '20 at 04:12
Key is not accessible inside the child component. The key prop is for React to keep track of items in a list. There is no use case for accessing the key internally. The key is a special prop. Have a read about keys [in the docs](https://reactjs.org/docs/lists-and-keys.html). — JMadelaine, Mar 25 '20 at 04:13
@JMadelaine I wish you'd answered rather than commenting so I could at least upvote the effort. — ababuji, Mar 25 '20 at 04:17
Also, this is a great question. So nice one for being so thorough :) — JMadelaine, Mar 25 '20 at 04:17

score 1 · Answer 1 · answered Mar 25 '20 at 04:12

1

The key prop in React is kind of a private variable and only meant for the renderer to verify what items changed and what didn't. Hence, you won't be able to access the key prop.

answered Mar 25 '20 at 04:12

Manan Joshi

629
1
6
17

Gotcha. I renamed the property to `name` and I was able to console log it and it printed. Can't believe it was this simple. – ababuji Mar 25 '20 at 04:16
1

Hey I'm gonna have to accept `JMadelaine`'s answer since I saw his on the comment section first. – ababuji Mar 25 '20 at 04:23

score 1 · Accepted Answer · answered Mar 25 '20 at 04:19

Th key prop is not accessible inside the child component as it is a special prop.

The key prop's main use case is to allow React to keep track of items in a list, to prevent unnecessary re-renders.

There is no use case for accessing the key internally.

Have a read about keys in the docs.

Passing props: One of the props `key` is undefined but the other is readable

2 Answers2