title: How to pass this item.id value into axios.get('http://localhost:5000/api/kam/:Id')
body: <p>I have a page called &quot;<em>application.js</em>&quot;. Where I fetch all the data from the database. I have another page called <em>&quot;detail.js&quot;</em>. Where I want to redirect by clicking the &quot;<strong>DETAIL</strong>&quot; button from <em>&quot;application.js&quot;</em>. Into &quot;<em>detail.js</em>&quot; I have to fetch the data by ID. The ID must be that particular item that I have clicked from <em>&quot;application.js&quot;</em> file.
  I want &quot;<code>item.id</code>&quot; value instead of <code>/:id</code> into <code>axios.get('http://localhost:5000/api/kam/:Id')</code>.</p>
  <p><a href="https://i.stack.imgur.com/ZMy8M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMy8M.png" alt="this is how the data is represented in application.js" /></a></p>
  <p>As you can see how the data represented in <em>&quot;application.js&quot;</em>. When I clicked on the &quot;<strong>DETAIL</strong>&quot; button it should carry <code>item.id</code> value.</p>
  <p>Here is the code for the <em>&quot;application.js&quot;</em>:</p>
  <pre class="lang-js prettyprint-override"><code>const PendingApplication = () =&gt; {
    //const { job } = props;
    let history = useHistory();
    const [data, setData] = useState([]);
    const handleClick = (location) =&gt; {
      console.log(location);
      history.push(location);
    };
  
    useEffect(() =&gt; {
      axios
        .get(&quot;http://localhost:5000/api/kam&quot;)
        .then((response) =&gt; {
          console.log(response);
          setData(response.data.kamData);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    }, []);
  
    return (
      &lt;div className=&quot;content&quot;&gt;
        &lt;Table&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Ticket No&lt;/TableCell&gt;
              &lt;TableCell align=&quot;right&quot;&gt;Category&lt;/TableCell&gt;
              &lt;TableCell align=&quot;right&quot;&gt;Sub Category&lt;/TableCell&gt;
              &lt;TableCell align=&quot;right&quot;&gt;Request Time &amp; Date&lt;/TableCell&gt;
              &lt;TableCell align=&quot;right&quot;&gt;Company Name&lt;/TableCell&gt;
              &lt;TableCell align=&quot;right&quot;&gt;Action&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {data.map((item, index) =&gt; (
              &lt;TableRow key={index}&gt;
                &lt;TableCell&gt;{item.ticketno}&lt;/TableCell&gt;
                &lt;TableCell&gt;{item.approvecategory}&lt;/TableCell&gt;
                &lt;TableCell&gt;{item.subcategory}&lt;/TableCell&gt;
                &lt;TableCell&gt;{item.date}&lt;/TableCell&gt;
                &lt;TableCell&gt;{item.companyname}&lt;/TableCell&gt;
                &lt;TableCell&gt;
                  &lt;Button
                    color=&quot;#71BD44&quot;
                    onClick={() =&gt; handleClick(`/detail/${item.id}`)}
                  &gt;
                    Detail
                  &lt;/Button&gt;
                &lt;/TableCell&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
    );
  };
  
  export default PendingApplication;
  </code></pre>
  <p>When you click on this Button, it's going to exact ID address in browser.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Button color=&quot;#71BD44&quot; onClick={() =&gt; handleClick(`/detail/${item.id}`)}&gt;
    Detail
  &lt;/Button&gt;
  </code></pre>
  <p>But I want this <code>${item.id}</code> value into this <code>axios</code> instead of <code>:id</code>:</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
    axios
      .get(&quot;http://localhost:5000/api/kam/:id&quot;)
  
      .then((response) =&gt; {
        console.log(response);
        setData(response.data.kamData);
      })
      .catch((error) =&gt; {
        console.log(error);
      });
  }, []);
  </code></pre>
  <p>This <code>useEffect</code> code is from &quot;<em>detail.js</em>&quot;.</p>
  <p>Can anyone help me? How to do that?</p>