title: How to pass id into navlink in react JavaScript
body: <p>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 <strong>(EMPLOYEEFORM)</strong>.</p>
  <p>Can you please suggest how to pass id into edit button so the button can take data to edit area.</p>
  <p>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 <strong>reactjs</strong>. 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.</p>
  <pre><code>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 = () =&gt; {
      
  
      const {id} = useParams();
      const [loading, setLoading] = useState(false);
      const [empName, setEmpName] = useState([]);
      const [empEmail, setEmpEmail] = useState([]);
      const [empPhone, setEmpPhone] = useState([]);
  
      useEffect(() =&gt; {
          if (id) {
              getEmployee();
          }
      }, [id]);
  
      const getEmployee = () =&gt; {
          setLoading(true);
          getEmployeeDetails(id).then((resp) =&gt; {
              if (isSuccess(resp)) {
                  const employee = resp.data.data;
                  setEmployeeValues(employee);
              }
          }).finally(() =&gt; setLoading(false));
      };
  
  
      const setEmployeeValues = (employee) =&gt; {
          setEmpName(employee.empName);
          setEmpEmail(employee.empEmail);
          setEmpPhone(employee.empPhone);
  
      };
  
  
      return(
          &lt;div&gt;
              &lt;Card 
                  title=&quot;Employee Info&quot; 
                  extra={[
                      &lt;NavLink to={'${routePaths.EMPLOYEEFORM}/${employee.id}'} className=&quot;lin&quot;&gt;
                          &lt;Button key=&quot;1&quot;&gt;
                              &lt;EditTwoTone twoToneColor=&quot;#000&quot; /&gt; Edit Employee Details
                          &lt;/Button&gt;
                      &lt;/NavLink&gt;,
                      &lt;NavLink to={routePaths.EMPLOYEES} className=&quot;lin&quot;&gt;
                          &lt;Button key=&quot;2&quot;&gt;
                              {'&lt;&lt;'} Back to Employee List
                          &lt;/Button&gt;
                      &lt;/NavLink&gt;,
                  ]}
              &gt;
                  
                  &lt;h6&gt;
                      &lt;strong&gt;Pesonal Details :&lt;/strong&gt;
                  &lt;/h6&gt;
                  
                  &lt;Divider /&gt;
                  &lt;Descriptions className=&quot;card-tis&quot;&gt;
                      &lt;Descriptions.Item label=&quot;Name &quot;&gt;{empName}&lt;/Descriptions.Item&gt;
                      &lt;Descriptions.Item label=&quot;Email &quot;&gt;{empEmail}&lt;/Descriptions.Item&gt;
                      &lt;Descriptions.Item label=&quot;Phone &quot;&gt;{empPhone}&lt;/Descriptions.Item&gt;
                  &lt;/Descriptions&gt;
                   
  
              &lt;/Card&gt;
          &lt;/div&gt;
      );
  
  };
  
  
  
  export default employeeDescription;
  </code></pre>