React Context : How to use it with object(s)

Issue

I'm working on a multi-route app with Ionic react. I'm struggling with the data since I fetch on one page, switch to another page then display ... ( maybe not the best )

The context seems like a better idea. The problem, I can't figure it out what I did wrong...

LabelContext.js

export default React.createContext({
    label: {},
    updateLabel: label => {}
});

App.tsx

import Label from './models/label';
import LabelContext from './helpers/LabelContext';
export default function App() {

  const [label, setLabel] = useState<Label[]>([]);
  const contextValue = {
    label,
    updateLabel: setLabel
  }
  
   return (
    <LabelContext.Provider value={contextValue}>
    <IonApp>
     ...
    </IonApp>
  </LabelContext.Provider>
   );
 }

A component

  const { label, updateLabel } = useContext(LabelContext);
  return (
    <div className="body">
      <div className="ag-theme-alpine full-size">
           <AgGridReact
               rowData={label}>
               ...
           </AgGridReact>
       </div>
    </div>
  );
};

Error :

Type '{}' is not assignable to type 'any[]'

And this does not work :

export default React.createContext({
    label: Label[],
    updateLabel: label => {}
});

Thanks

Solution

CreatContext is expecting a default value not a type. You can either remove the object you are passing into CreatContext or give a default value for each. export default React.createContext({ label: Label[]=[], updateLabel=()=> {} });

Answered By - Sanish Joseph