skip to Main Content

I am new in React Native and i’m trying to develop a mobile app with Expo.

I am trying to call a function of a component class in my App.tsx. I don’t want that function is static because i need to access to my variable of my state which is in my constructor of my class.

App.tsx

const App = () => {

  const [variable, setVariable] = useState('');

  useEffect(() => {
      //doing some stuff 
  }, [])
  
  Class1.method(variable);
  
  [...]
}

Class1.tsx

class Class1 extends Component<any, any> {
  
  constructor(props: any){
    super(props);

    this.state = {
      company_name: [],
    }
  }

  method(param: any) {
    Object.values(param).map(function(d: any, idx){
      this.state.company_name = [...this.state.company_name, d];
    });
  }

  [...]

So the thing is that i am having an array in my App.tsx and i want to pass it to my Class1.

Is that possible to do in that way or am i missing something ?

Thanks in advance

2

Answers


  1. You should export your Class1 component by adding export default Class1; at the bottom of your Class1.tsx, after class declaration.

    Then you will be able to import the component and use it in the App.tsx file.

    Read this React doc on Code splitting to learn more.

    Login or Signup to reply.
  2. Put your array in props

    const App = () => {
      const [names, setNames] = useState([]);
    
      const addCompanyName = (name) => {
        setNames([...names, name]);
      }
    
      const addRandomCompany = () => {
        addCompanyName(Math.random().toString());
      }
    
      return <>
        <Button title='random name' onPress={addRandomCompany}/>
        <Child companyNames={names}/>
      </>
    }
    
    const Child = ({ companyNames }) => {
      return <>
        {companyNames.map((name) => <Text>{name}</Text>)}
      </>
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search