Some Problem in Params, Not getting the Emp id ? possible solution

Question

Error Are : Uncaught TypeError: Cannot read properties of undefined (reading 'params'), The above error occurred in the component: I might think i problem is in the passing props

App component

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<Navigate to={"/card"} />}></Route>
          <Route path="/card" element={<Card />} />
          <Route path="/edit/:id" element={<EditEmployee  />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

card Component

const emp1 = {
  empId: 100,
  empName: "Jack",
  age: 30,
  salary: 50000,
  image: image1,
  achievements:
    "Has got 3 bravo awards and 1 MVP award. Has worked on cutting edge technologies as well",
};
const emp2 = {
  empId: 101,
  empName: "Jane",
  age: 24,
  salary: 40000,
  image: image2,
  achievements: "No major achievements so far",
};
export default class Card extends React.Component {
  empArr = [emp1, emp2];
  render() {
    return (
      <div>
        <h3 className="text-center text-primary">Employee Details</h3>
        <div className="row">
          {this.empArr.map((emp) => (
            <Employee key={emp.empId} emp={emp} />
          ))}
        </div>
      </div>
    );
  }
}

Employee Component

class Employee extends React.Component {
  state = {
    achievements: null,
    edit: null,
  };
  handleEdit = () => {
    this.setState(() => ({ edit: true }));
  };
  handleView = () => {
    this.setState(() => ({ achievements: this.props.emp.achievements }));
  };
  render() {
    const { emp } = this.props;
    if (this.state.edit) {
      return <Navigate to={"/edit/" + emp.empId} push></Navigate>;
    }
    return (
      <div className="card" style={{ width: 200 }}>
        <img
          className="card-img-top"
          src={emp.image}
          height="200"
          alt="Card cap"
        />
        <div className="card-body">
          <h5 className="card-title text-center">{emp.empName}</h5>
          <p className="card-text">
            <span>Id: {emp.empId}</span>
            <br />
            <span>Age: {emp.age}</span>{" "}
            {emp.age < 25 && <span className="text-info"> - Fresher</span>}
            <br />
            <span>Salary: {emp.salary}</span>
            <br />
          </p>
          <p>
            <i>{this.state.achievements}</i>
          </p>
          <button
            type="button"
            className="btn btn-primary"
            onClick={this.handleEdit}
          >
            Edit
          </button>
          <button className="btn btn-success" onClick={this.handleView}>
            View
          </button>
        </div>
      </div>
    );
  }
}

EditEmployee Component

class EditEmployee extends React.Component {
  render() {
    return <h3>The selected  ID is {this.props.match.params.id}</h3>;
  }
}
export default EditEmployee;

Result should be like this WHAT I WANT

but i am getting this error on click edit enter image description here

WHAT I AM GETTING /ERROR IMAGE

does it answer your question? https://stackoverflow.com/questions/45144085/react-this-props-params-undefined — Georgy, Mar 07 '22 at 12:41

Dave · Accepted Answer · 2022-03-07T13:28:59.617

0

You want to get the params via the useParams() hook:

const EditEmployee = () => {
  const id = useParams()
  return (
    <h3>The selected  ID is {id}</h3>;
  )
}
export default EditEmployee;

Sorry that's a functional component. You can translate it to a class...

Did you just console.log(this.props) in your EditEmployee to see what you're getting?

You may need to wrap your class component in a function component as illustrated here.

Documentation here

edited Mar 07 '22 at 13:28

answered Mar 07 '22 at 13:17

Dave

7,552
4
22
26

I tried Changing the class component into functional , like you mentioned and that works absolutely fine as Expected, Thanks still trying to do it with class Component and not getting the – Ashutosh Nagrale Mar 08 '22 at 12:43
If you really want a class component, use the code in the example I linked. You only need to replace ` – Dave Mar 08 '22 at 14:07

Some Problem in Params, Not getting the Emp id ? possible solution

1 Answers1