How to open a new page with specific dataset with a button click in react?

user_19307755 0
Viewed 46

I'm a noob to React and I do have some react projects I'm working and learning. Now I have a code that I was able to successfully render the data from my Node+MSSQL backend. What my question is using a button click of one of the data among the dataset how to show that specific details on the next page.

SingleShopOrder.js
Route : http://localhost:3000/SingleShopOrder

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([]);
    useEffect(() => {
        fetchNormacs();
      }, []);
    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);
          });
      };
      const [message, setMessage] = useState([]);
    
      const handleChange = event => {
        setMessage(event.target.value);
      }
    const begin = ()=> {
        console.log("Clicked")
    }

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={"1"} onClick={handleChange}>SELECT</button>
                        </div>
                        ))}
                        </div>
                    </div>
            </div>
        </>


    )
}

return (
    <h1>Check the KepServer tags!!!</h1>
)

}

export default SingleShopOrder;

Reference of "SingleShopOrder" page

VerifySingleShopOrder.js

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

const VerifySingleShopOrder = ({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;

Reference of "VerifySingleShopOrder" page

I tried to pass the props from "SingleShopOrder" to "VerifySingleShopOrder" page to get the data of whichever "Select" button clicked. What am I doing wrong here passing the props and how should I display the expected output?

react-props reactjs
1 Answers

I'll rewrite it a bit:

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;

Then in your VerifySingleShopOrder component:

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;

Of course, this code looks ugly a lot... but for a starter it's ok, you still have a lot to learn about react

I hope it's of some help

user_150567110
Related