CODEWITHSUNDEEP
reactjstypescriptreact-hooks
JAOdev
JAOdev

Reputation: 341

userContext implementation faild in writting

I have a question about userContext in react with typescript.

First I define it in RubroContext.tsx

import { createContext, useContext } from "react";
import { RubroType1, RubroType2 } from "../Interfaces/interfaces";

export const  RubroContext1 = createContext <Partial<RubroType1>>({})
export const  RubroContext2 = createContext <Partial<RubroType2>>({})

export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);

this is interfaces.tsx

export type RubroType1 = {
    rubrosItem1 : itemRubro;
    setItemRubro1: Dispatch<SetStateAction<itemRubro >>;
  }

  export type RubroType2 = {
    rubrosItem2 : itemRubro;
    setItemRubro2 : Dispatch<SetStateAction<itemRubro >>;
  }

and this is how I implement it in the components

const CompletarRubros = (props:{setIsReg:any,email:any, clientType:any}) => {
  
  const {rubrosItem1,setItemRubro1} = useRubroContext1 () 
  const {rubrosItem2,setItemRubro2} = useRubroContext2 () 

  const rubro = useRef ("first") 
  const radius = useRef (1) 
  const description = useRef ("test") 
  
  useEffect(() => {
     setItemRubro1!({ 
                     rubro:rubro.current,
                     radius:String(radius),
                     description:descripcion.current,
                     calificacion:0,
                     })
     
   }, []);
  
  //...........

  }

The problem is that the code is not updated. When I want to access rubrosItem1 in other components, the information that should have been saved in the useEffect is not there. I am doing something wrong?

for example in another component

const Test= () => {

     const {rubrosItem1,setItemRubro1} = useRubroContext1 () 

      useEffect(() => {
    
         console.log(rubrosItem1.rubro) 
          
         // it does not show anything
     
   }, []);
   
}

Upvotes: 0

Views: 22

Answers (1)

Lin Du
Lin Du

Reputation: 102672

You should create a RubroContext1Provider component and declare the context value as its local state. So that the children of the RubroContext1Provider component and share the context value(stored in its state).

E.g.

RubroContext.tsx:

import {
  createContext,
  Dispatch,
  SetStateAction,
  useContext,
  useState,
} from 'react';
import * as React from 'react';

type itemRubro = any;

export type RubroType1 = {
  rubrosItem1: itemRubro;
  setItemRubro1: Dispatch<SetStateAction<itemRubro>>;
};

export type RubroType2 = {
  rubrosItem2: itemRubro;
  setItemRubro2: Dispatch<SetStateAction<itemRubro>>;
};

export const RubroContext1 = createContext<Partial<RubroType1>>({});
export const RubroContext2 = createContext<Partial<RubroType2>>({});

export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);

export const RubroContext1Provider = ({ children }) => {
  const [value, setValue] = useState();
  return (
    <RubroContext1.Provider
      value={{
        rubrosItem1: value,
        setItemRubro1: setValue,
      }}
    >
      {children}
    </RubroContext1.Provider>
  );
};

CompletarRubros.tsx:

import { useEffect, useRef } from 'react';
import { useRubroContext1 } from './RubroContext';

export const CompletarRubros = () => {
  const { rubrosItem1, setItemRubro1 } = useRubroContext1();

  const rubro = useRef('first');
  const radius = useRef(1);
  const description = useRef('test');

  useEffect(() => {
    setItemRubro1({
      rubro: rubro.current,
      radius: String(radius),
      description: description.current,
      calificacion: 0,
    });
  }, []);

  return null;
};

Test.tsx:

import { useRubroContext1 } from './RubroContext';

export const Test = () => {
  const { rubrosItem1 } = useRubroContext1();
  console.log('[Test]:', rubrosItem1?.rubro);
  return null;
};

App.tsx:

import * as React from 'react';
import { CompletarRubros } from './CompletarRubros';
import { RubroContext1Provider } from './RubroContext';
import './style.css';
import { Test } from './Test';

export default function App() {
  return (
    <div>
      <RubroContext1Provider>
        <CompletarRubros />
        <Test />
      </RubroContext1Provider>
    </div>
  );
}

The console logs:

[Test]:undefined
[Test]:undefined
[Test]:first
[Test]:first

stackblitz

Upvotes: 1

Related Questions