CODEWITHSUNDEEP
javascripthtmlreactjskey
DavSev
DavSev

Reputation: 1111

React Js- Can't see prop value inside html tag as key

Him I have a component, for some reason, I can't see any variable value inside the containing <tr> HTML tag. between the <td> tag I can see the variable value.

If I write <tr id={id}> i receive the data but If I write <tr key={id}> I get only <tr> in the code.

The id is generated by uuid an dis something like this 62b82703-12f5-4fe6-903c-b875aa69246a

What can be the reason for that?

this is my component:

    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;

Upvotes: 2

Views: 1731

Answers (3)

reflexgravity
reflexgravity

Reputation: 970

Keys in React are used to give React a hint to identify unique values in a list. But they aren't passed down to the component as a prop nor are added to the DOM after render. If you want to actually see the Key in the DOM you need to specify it using a different prop.

Upvotes: 6

mfakhrusy
mfakhrusy

Reputation: 1198

Are you using google chrome developer tool inspection? key won't be appeared on the devtool. Consider using reactJS devtool (you can download it via chrome extension store) to check the react component on the devtool, you cannot check react component directly via default developer tool.

key is not a valid html attribute, it's react specific, that's why you can't see that via chrome developer tool inspection.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

Add both the key and id:

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

Upvotes: 0

Related Questions