how to use useContext and Dataframe

[syedzayyan]

const LigandContext = createContext();
In here how do I declare the type?

  const [ligand_df, setLigand_df] = useState();

  return (
    <LigandContext.Provider value={[ligand_df, setLigand_df]}>

And then here? Basically I am setting a dataframe to the context

[RahulDas-dev]

Step 1. Create a Context and ContextProvider

import { DataFrame } from "danfojs";
import { createContext, useMemo, useState } from "react";


export type DataContextType = {
    dataframe: DataFrame
    setDataFrame : (data: DataFrame) => void
};


export const DataContext = createContext<DataContextType>({
    dataframe: new DataFrame(),
    setDataFrame: (data: DataFrame) => data,
});


const DataContextProvider = ({children}:{children: JSX.Element}) => {
    const [dataframe, setDataFrame] = useState<DataFrame>(new DataFrame());

    const context_values = useMemo(
        () => ({dataframe, setDataFrame}),
        [dataframe, setDataFrame]
    )
    
    return <DataContext.Provider value={context_values}>
                {children}
            </DataContext.Provider>
  };


  export default DataContextProvider

Step 2. Add the ContextProvider to App

import React from 'react'
import App from './App.tsx'
import './index.css'
import  "danfojs"
import DataContextProvider from './context/data_context.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <DataContextProvider>
        <App />
      </DataContextProvider>  
    </React.StrictMode>
)

Step 3. Use it to read/Update the context values in other Componnets

import { FunctionComponent, ReactElement, useState, ChangeEvent, useCallback ,useRef, useContext  } from 'react'
....
import { readCSV, DataFrame } from "danfojs"
import { DataContext } from '../../context/data_context';

const DataLoader: FunctionComponent = ():ReactElement =>{
  const {setDataFrame} = useContext(DataContext)
  const [file_object, setFileobject] = useState<File|null>(null)
  const onFileChange = useCallback((e:ChangeEvent<HTMLInputElement>) => setFileobject(e.target.files![0]),[])
  const onFileUpload = async () => {
    try {
        console.log(`File Name ${file_object!.name.toString()}`)
        const fileUrl = URL.createObjectURL(file_object!);
        readCSV(fileUrl)
        .then(df => {
            df.print()
            setDataFrame(df)
        }).catch(err => {
            console.log(err);
        })
        // console.log(`Total Number of Sample ${_data.length}`)
    } catch (error: any) {
         console.error(error);
    }
  }
  
  return (
     return (
        <div className="relative w-full">

            <label htmlFor="file-input" className="sr-only">Choose file</label>
            <input type="file"
                placeholder="Browse file, CSV / TSV File type allowed only ...."
                accept=".csv, .tsv" 
                onChange={onChange}
                />

            <button 
                    onClick={onFileUpload}
                    disabled={disabled}>Fetch Data</button>        
        </div>
    );
)