2

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;
1

3 Answers 3

6

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.

0
1

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.

6
  • o.k I see the key in the react dev tool screencast.com/t/PlHbkNWkN0c Will I always see the error in chrome console?
    – DavSev
    Commented Apr 14, 2019 at 6:27
  • can you specify what error you encountered? @DavSev
    – mfakhrusy
    Commented Apr 14, 2019 at 6:30
  • This is the error Warning: Each child in a list should have a unique "key" prop. See https ://fb.me /react- warning-keys for more information. here is a screenshot of the complete error
    – DavSev
    Commented Apr 14, 2019 at 6:42
  • here is a screenshot of the complete error screencast.com/t/Put2WI4QoSf
    – DavSev
    Commented Apr 14, 2019 at 6:47
  • you should add key props to Course component since that component is the one being looped, am I right? @DavSev. i.e <Course key={UNIQUEKEY} />
    – mfakhrusy
    Commented Apr 14, 2019 at 13:21
0

Add both the key and id:

<tr key={id} id={id}>...</tr>
1
  • Thanks, Not showing the key prop this is what I get <tr id="8eff9d2e-23f2-4430-a89d-fdc2dd4f846e"> this is the code <tr key={id} id={id}>
    – DavSev
    Commented Apr 14, 2019 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.