How to pass id into navlink in react JavaScript

Question

I am fetching details from database and displaying on page and I want to create an edit button which after click can open that details in editable form. In my case that editable form is (EMPLOYEEFORM).

Can you please suggest how to pass id into edit button so the button can take data to edit area.

I am having problem. Right not I have pass id to navlink but its gives me error like employee not found with this id. I am new to reactjs. I tried passing id value but its not acting properly and I am not so aware of passing id into navlink or button. Can you please suggest some direct code or and valuable link where can I update my knowledge.

import React, { useEffect, useState } from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import { getEmployeeDetails } from '../../shared/services/apiService';
import { useParams, NavLink, Redirect } from 'react-router-dom';
import { Descriptions , Card , Divider, Row , Col , Button} from 'antd';
import { isSuccess } from '../../shared/utils/jsHelper';

import { EditTwoTone } from '@ant-design/icons';
const { Meta } = Card;

const employeeDescription = () => {
    

    const {id} = useParams();
    const [loading, setLoading] = useState(false);
    const [empName, setEmpName] = useState([]);
    const [empEmail, setEmpEmail] = useState([]);
    const [empPhone, setEmpPhone] = useState([]);

    useEffect(() => {
        if (id) {
            getEmployee();
        }
    }, [id]);

    const getEmployee = () => {
        setLoading(true);
        getEmployeeDetails(id).then((resp) => {
            if (isSuccess(resp)) {
                const employee = resp.data.data;
                setEmployeeValues(employee);
            }
        }).finally(() => setLoading(false));
    };


    const setEmployeeValues = (employee) => {
        setEmpName(employee.empName);
        setEmpEmail(employee.empEmail);
        setEmpPhone(employee.empPhone);

    };


    return(
        <div>
            <Card 
                title="Employee Info" 
                extra={[
                    <NavLink to={'${routePaths.EMPLOYEEFORM}/${employee.id}'} className="lin">
                        <Button key="1">
                            <EditTwoTone twoToneColor="#000" /> Edit Employee Details
                        </Button>
                    </NavLink>,
                    <NavLink to={routePaths.EMPLOYEES} className="lin">
                        <Button key="2">
                            {'<<'} Back to Employee List
                        </Button>
                    </NavLink>,
                ]}
            >
                
                <h6>
                    <strong>Pesonal Details :</strong>
                </h6>
                
                <Divider />
                <Descriptions className="card-tis">
                    <Descriptions.Item label="Name ">{empName}</Descriptions.Item>
                    <Descriptions.Item label="Email ">{empEmail}</Descriptions.Item>
                    <Descriptions.Item label="Phone ">{empPhone}</Descriptions.Item>
                </Descriptions>
                 

            </Card>
        </div>
    );

};



export default employeeDescription;

You have to use template literals using `` instead of '', as it will interpolate your variable. ` ` — aurabliss, Apr 11 '20 at 05:53

Sohail Ashraf · Answer 1 · 2020-04-11T06:14:28.840

You can merge all of the states in one state of employee instead of maintaining state for each employee property.

In the provided code you are using signle (') quotes in the navlink instead of backticks. Which will not resolve the variable and you will get a plain string like ${routePaths.EMPLOYEEFORM}/${employee.id}.

I have made few changes please try.

import React, { useEffect, useState } from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import { getEmployeeDetails } from '../../shared/services/apiService';
import { useParams, NavLink, Redirect } from 'react-router-dom';
import { Descriptions, Card, Divider, Row, Col, Button } from 'antd';
import { isSuccess } from '../../shared/utils/jsHelper';
import { EditTwoTone } from '@ant-design/icons';
const { Meta } = Card;
const employeeDescription = () => {

  const { id } = useParams();
  const [loading, setLoading] = useState(false);
  const [employee, setEmployee] = useState({});

  useEffect(() => {
    if (id) {
      getEmployee();
    }
  }, [id]);

  const getEmployee = () => {
    setLoading(true);
    getEmployeeDetails(id)
      .then((resp) => {
        if (isSuccess(resp)) {
          const employee = resp.data.data;
          setEmployee(employee);
        }
      })
      .finally(() => setLoading(false));
  };


  return (
    <div>
      <Card
        title="Employee Info"
        extra={[
          <NavLink to={`${routePaths.EMPLOYEEFORM}/${employee.id}`} className="lin">
            <Button key="1">
              <EditTwoTone twoToneColor="#000" /> Edit Employee Details
                        </Button>
          </NavLink>,
          <NavLink to={routePaths.EMPLOYEES} className="lin">
            <Button key="2">
              {'<<'} Back to Employee List
                        </Button>
          </NavLink>,
        ]}
      >
        <h6>
          <strong>Pesonal Details :</strong>
        </h6>
        <Divider />
        <Descriptions className="card-tis">
          <Descriptions.Item label="Name ">{employee.empName}</Descriptions.Item>
          <Descriptions.Item label="Email ">{empEmail.empEmail}</Descriptions.Item>
          <Descriptions.Item label="Phone ">{empPhone.empPhone}</Descriptions.Item>
        </Descriptions>

      </Card>
    </div>
  );
};

export default employeeDescription;

Yes correct the same thing I have mentioned in my ans as well. — Sohail Ashraf, Apr 11 '20 at 07:19
i corrected my code.. but there is no need of {employee.id} , there is only need of {id} and my mistake was that. — Raushan Singh, Apr 11 '20 at 07:24

How to pass id into navlink in react JavaScript

1 Answers1