[Solved]-How to open a new page with specific dataset with a button click in react?-Reactjs

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import "../App.css";

const SingleShopOrder = () => {
  const [shopOrder, setshopOrder] = useState([]);
  const [message, setMessage] = useState(0); // if message is not an array
    // then do not initialize the state as []
    // by the way the name of the var is confusing me
    // if it is supposed to store the selected order then 'message' is
    // inaccurate

  const fetchNormacs = () => {
    axios
      .get("http://localhost:8090/api/ctms/normacs/machine/NOR1")
      .then((res) => {
        // console.log(res);
        setshopOrder(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  // here we are expecting order's id
  const handleChange = ({target:{value}}) => {
    // setMessage(value); // use this line if ID is a string
      setMessage(Number(value)) // use this line if ID is a number
  };
  const begin = () => {
    console.log("Clicked");
  };

  useEffect(() => {
    fetchNormacs();
  }, []);
  
  if (shopOrder) {
    return (
      <>
        <div className="mainCard">
          <div className="container column-left">
            <div className="item">
              <Link className="navStyle" to="/Overview" onClick={() => begin()}>
                Overview
              </Link>
            </div>
            <div className="item">
              <Link
                className="navStyle"
                to="/ShopOrder"
                onClick={() => begin()}
              >
                Shop Order
              </Link>
            </div>
            <div className="item">
              <Link className="navStyle" to="/Employee" onClick={() => begin()}>
                Employee
              </Link>
            </div>
            <div className="item">
              <Link
                className="navStyle"
                to="/Maintenance"
                onClick={() => begin()}
              >
                Maintenance
              </Link>
            </div>
          </div>

          <div className="column-right">
            <h2 className="so_header">Select shop order for Normac 1</h2>
            <div className="wc">
              {shopOrder.map((so) => (
                <div key={so.ID}>
                  <h3>S/O No :{so.ord_no}</h3>
                  <p>Item No :{so.item_no}</p>
                  <p>Item Desc :{so.item_desc_1}</p>
                  <button
                    id="message"
                    name="message"
                    value={so.ID} // se the button value to current order's id
                    onClick={handleChange}
                  >
                    SELECT
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </>
    );
  }
  
  // check if message is different from the initial state
  if (message !== 0) return <VerifySingleShopOrder
      order={shopOrder.find(item => item.id === message)} // pass your props here
  /> 
  

  return <h1>Check the KepServer tags!!!</h1>;
};

export default SingleShopOrder;

import React, { useEffect, useState } from 'react'
import { Link } from "react-router-dom";
import '../App.css';

// component now is expecting a prop called 'order' which have all the
// properties you need to display detailed message
const VerifySingleShopOrder = ({order:{ID,ord_no,item_no,item_desc_1}}) => {

    const [message, setMessage] = useState([]);

    const handleChange = event => {
        setMessage(event.target.value);
    }
    const begin = ()=> {
        console.log("Clicked")
    }

    return(
        <>
            <div className='mainCard'>
                <div className="container column-left">
                    <div className="item">
                        <Link className="navStyle" to="/Overview" onClick={() => begin()}>
                            Overview
                        </Link>
                    </div>
                    <div className="item">
                        <Link className="navStyle" to="/ShopOrder" onClick={() => begin()}>
                            Shop Order
                        </Link>
                    </div>
                    <div className="item">
                        <Link className="navStyle" to="/Employee" onClick={() => begin()}>
                            Employee
                        </Link>
                    </div>
                    <div className="item">
                        <Link className="navStyle" to="/Maintenance" onClick={() => begin()}>
                            Maintenance
                        </Link>
                    </div>
                </div>
                <div className='column-right'>
                    <h2 className='so_header'>Verify shop order for Normac 1</h2>
                    <div className='wc'>
                        <h3>S/O No :{ord_no}</h3>
                        <p>Item No :{item_no}</p>
                        <p>Item Desc :{item_desc_1}</p>
                        <button id="message" name="message" value={"1"} onClick={handleChange}>LOGIN & VERIFY</button>
                    </div>
                </div>
            </div>
        </>
    )
}

export default VerifySingleShopOrder;