How to call a component class function in my App.tsx?

Question

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

Answer 1

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>)}
  </>
}