React Table - Passing accessor value from one Sibling table to another using hooks

Question

I'm currently doing a React project that basically compares two table components then add a value to the 2nd table once the condition is met. Have found a similar thread below that shows this scenario but the difference is instead of just data, i want to pass the assessor value to another table. Passing data to sibling components with react hooks?

My code below as follows:

----------App.js---------------------------- /app component which hooks to the two table components "PricingQuotationTable" and FormalQuotationTable/

import { PricingQuotationTable } from './components/PricingQuotationTable';

import {FormalQuotationTable} from './components/FormalQuotationTable';

function App() {

<div>
    <PricingQuotationTable />
</div>
<div>
   <FormalQuotationTable />
 </div>                              
);

} export default App;

--------PricingQuotationTable----------------------- /My first table where I want to compare the accessor: customer with the 2nd table. This will also pass the pricingquotationid to the 2nd table/

import MOCK_PRICINGQUOTATION from './MOCK_PRICINGQUOTATION.json'

import pricingquotationcolumns from './pricingquotationcolumns'

export const PricingQuotationTable = () => {

function Table({ columns, data, updateMyData, skipPageReset }) {

...table prop here

return (
    <>
    </div>
        <Styles>
           ....Rendered Header and Cell here
        </Styles> 
    </>
)

} const data1 = useMemo(() => MOCK_PRICINGQUOTATION,[])

const [data, setData] = useState(() => data1,[])

const columns = useMemo(() => pricingquotationcolumns, []) }

--------pricingquotationcolumns--------------------

export const pricingquotationcolumns = [

{
    Header: 'Quotation ID',

    accessor: '**pricingquotationid**',

},
{

    Header: 'CUSTOMER NAME',

    accessor: '**customer**',
},

] export default pricingquotationcolumns

-------------MOCK_PRICINGQUOTATION---------------- /MOCK DATA FOR TESTING ONLY/ [{"pricingquotationid":1000000,"customer":"AAA YYYY",}]

--------FormalQuotationTable----------------------- /My Second table. Once the customer accessor matches, it will input the pricingquotationid in one of the columns below/

import MOCK_FORMALQUOTATION from './MOCK_FORMALQUOTATION.json'

import formalquotationcolumns from './formalquotationcolumns'

export const FormalQuotationTable = () => {

function Table({ columns, data, updateMyData, skipPageReset }) { ....table prop here

return (
    <>
    </div>
        <Styles>
           ....Rendered Header and Cell here
        </Styles> 
    </>
)

} const data1 = useMemo(() => MOCK_FORMALQUOTATION,[])

const [data, setData] = useState(() => data1,[])

const [originalData] = useState(data)

const [skipPageReset, setSkipPageReset] = useState(false)

const columns = useMemo(() => formalquotationcolumns, [])

}

--------formalquotationcolumns--------------------

export const formalquotationcolumns = [ { Header: 'Quotation ID', accessor: 'pricingquotationid', }, { Header: 'CUSTOMER NAME', accessor: 'customer', }, { /Once customer matches, add pricingquotationid here/

    **Header: 'Request for Quotation #',

    accessor: a => (a.customer === pricingquotationcolumns.customer ? pricingquotationcolumns.pricingquotationid : "CUST / STAT NOT MATCH")**
},

]

export default formalquotationcolumns

-------------MOCK_PRICINGQUOTATION---------------- [{"formalquotationid":5000000,"customer":"AAA YYYY",}]

Thanks again for the help! Please reply back for any other clarifications. Thank you.

React Table - Passing accessor value from one Sibling table to another using hooks

0 Answers0