How can I access a state of another file (and function) in React JS?

Question

I'm looking for a solution for my problem. I'm using a library called unstated (https://github.com/GitbookIO/unstated). It makes a global state for an reactjs app. The problem is: I can't use a state made on a function X in my function Y. In this case, I created my state in App.js and wanna access it in my DivCheckBox.js.

App.js:

    import './App.css';
import DivCheckBox from './components/DivCheckBox/DivCheckBox';
import { Container, useUnstated } from '@gitbook/unstated';

class DadosUnstated extends Container<{
  nodesPadrao: Object,
  edgesPadrao: Object,
  }> {
  state = {
    nodesPadrao: [
      {
        status: 0,
        id:1,
        label: 'MAT001',
        title: 'CALCULO DIFERENCIAL E INTEGRAL I',
        details: "Integrais- impróprias: seqüências séries numéricas. Funções de R em R. Derivadas. Integrais. Aplicações. \"Regras de L'Hospital\".",
        level: 1,
        weight: 90,
        groupId: 1,
        subGroupId: 1,
        slots: [1, 2],
      },
      {
        status: 0, 
        id:50,
        label: 'EEE019',
        title: 'TRABALHO DE CONCLUSAO DE CURSO II',
        details: 'Finalização do projeto elaborado, no projeto final de curso I e apresentação de monografia. Defesa do trabalho perante banca examinadora.',
        level: 11,
        weight: 90,
        groupId: 5,
        subGroupId: 4,
        slots: [1, 2],
      },
      {
        status: 0, 
        id:51,
        label: 'EEE020',
        title: 'ESTAGIO SUPERVISIONADO EM ENGENHARIA DE SISTEMAS',
        details: 'Atividades de treinamento, supervisionadas por um docente do curso, na área de atuação profissional do engenheiro de sistemas.',
        level: 12,
        weight: 165,
        groupId: 5,
        subGroupId: 4,
        slots: [1, 2],
      },
    ],

    edgesPadrao:[
      {
        id: 1,
        from: 1,
        to: 7,
        label: 'MAT001 -> MAT039',
      },
      {
        id: 29,
        from: 32,
        to: 41,
        label: 'ELEXXE -> ELEXXF',
      },
      {
        id: 30,
        from: 44,
        to: 42,
        label: 'ELE090 -> ELEXXG',
      },
      {
        id: 31,
        from: 40,
        to: 41,
        label: 'ELEXXF -> ELE088',
      },
      {
        id: 32,
        from: 30,
        to: 42,
        label: 'ELT080 -> ELEXXG',
      },
      {
        id: 33,
        from: 35,
        to: 40,
        label: 'ELE077 -> ELE088',
      },
      {
        id: 55,
        from: 11,
        to: 33,
        label: 'ELEXXI -> ELEXXJ',
      },
      {
        id: 56,
        from: 47,
        to: 48,
        label: 'ELEXXK -> ELE087',
      },
    ],

  };
 
  increment(id) {
    let aux=this.state.nodesPadrao;
    aux[id-1].status=!aux[id-1].status;
    this.setState({ nodesPadrao: aux });
    console.log(this.state.nodesPadrao);
  }
 
  decrement(id) {
    let aux=this.state.nodesPadrao;
    aux[id-1].status=!aux[id-1].status;
    this.setState({ nodesPadrao: aux });
    console.log(this.state.nodesPadrao);
  }

}

function App() {

  const dados = useUnstated(DadosUnstated);

  return (
    <div>

              {dados.state.nodesPadrao.map(p => {
              return (
                
                <DivCheckBox nomeDisciplina = {p.title} labelDisciplina = {p.label} id = {p.id}/>
                
              )})
              }

            <p>{dados.state.edgesPadrao[3].status} oiiiiii {dados.state.edgesPadrao[0].status}</p>

    </div>
  );
}

export default App;

DivCheckBox.js:

    import React, { Component } from 'react';
import Func from './func'
import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'

function DivCheckBox(props){

    const dados = useUnstated(DadosUnstated);

    dados.nodesPadrao[2].status=12;

    return(
          <div>
          <p id = "pgh">{props.nomeDisciplina}</p>
          <input id="MAT001" class = {props.labelDisciplina} type="checkbox" onClick={() => Func(props.labelDisciplina,props.id)}/>
          </div>
    );
    
}

export default DivCheckBox;

Func.js:

    import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'

function Func(classe,id){

    const dados = useUnstated(DadosUnstated);

    var chb = document.getElementsByClassName(classe);

    if(chb[0].checked){
        console.log("marquei o "+classe);
        
    }else if(!chb[0].checked){
        console.log("desmarquei o "+classe);
        
    }

}

export default Func;

Answer 1

Issue

I think you've mixed up what you are exporting from App.js and importing for use in DivCheckBox.

In App.js:

export default App;

In DivCheckBox.js:

import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';

...

const dados = useUnstated(DadosUnstated);

Here DadosUnstated is default imported from App.js, which is the App React component, not the DadosUnstated container that was defined.

Solution

I think you probably exported DadosUnstated as a names export

export DadosUnstated;

So you should import it as a named import

import { DadosUnstated } from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';

I believe it will now reference the object you are expecting it to reference, i.e. the container, and the hook should now work.

const dados = useUnstated(DadosUnstated);