React Js - не могу видеть значение пропа внутри html-тега как ключ

Question

Его у меня есть компонент, по какой-то причине я не вижу никакого значения переменной внутри содержащего <tr> HTML-тега. между тегом <td> я вижу значение переменной.

Если я пишу <tr id={id}>, я получаю данные, но если я пишу <tr key={id}>, я получаю только <tr> в коде.

Идентификатор генерируется uuid как-то так 62b82703-12f5-4fe6-903c-b875aa69246a

В чем может быть причина?

это мой компонент:

    import React, { Component } from "react";
import { Button } from "react-bootstrap";

class Course extends Component {
  updatedGrade = e => {
    this.props.updateCourseGrade(
      Number(e.currentTarget.value),
      Number(e.target.id)
    );
  };
  render() {
    const { id, courseName, courseGrade, courseType } = this.props.course;
    return (
      <tr key={id}>
        <td>
          {courseType == 0 ? "מכינה" : "אקדמי"} - {courseName} - {id}
        </td>
        <td>{courseGrade}</td>
        <td>
          <Button
            onClick={this.props.removeCourse.bind(this, id)}

            variant="danger"
          >
            הסר
          </Button>
        </td>
      </tr>
    );
  }
}

const btnStyle = {
  background: "#ff0000",
  color: "#fff",
  padding: "5px 20 px",
  border: "0px"
};

export default Course;

Answer 1

Ключи в React используются, чтобы дать React подсказку для определения уникальных значений в списке. Но они не передаются компоненту в качестве реквизита и не добавляются в DOM после рендеринга. Если вы действительно хотите увидеть Ключ в DOM, вам нужно указать его, используя другой реквизит.

Answer 2

Вы используете проверку инструментов разработчика Google Chrome?key не появится в devtool.Подумайте об использовании activJS devtool (вы можете загрузить его через хранилище расширений chrome), чтобы проверить компонент реакции на devtool, вы не можете проверить компонент реакции напрямую с помощью инструмента разработчика по умолчанию.

key не является допустимым атрибутом html,это зависит от конкретной реакции, поэтому вы не можете увидеть это при осмотре Chrome Developer Tool.

Answer 3

Добавьте оба значения key и id:

<tr key={id} id={id}>...</tr>