I want to extract some components and set them into their own modules. I want to set hook() and addName() into their own modules, but I don’t know how to call the variables/functions that they use.

So far I've tried to export my setState variables, but that doesn't work because I still need to use them within App().

I’ve tried passing setPersons.

import { useState, useEffect } from 'react'
import Persons from './components/persons'
import PersonForm from './components/personForm'
import Filter from './components/searchFilter'
import axios from 'axios'




const App = () => {
  const [persons, setPersons] = useState([])
  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')
  const [setFilter, setNewFilter] = useState('')
 

  const hook = () => {
  
    console.log("effect")
    axios 
      .get('http://localhost:3001/persons')
      .then(response =>{
        console.log('promise fulfilled')
        setPersons(response.data)
      })

  }
  useEffect (hook, []);
  
  const addName= () => {
    const nameObject =
    {
      name: newName,
      number: newNumber,
      id: persons.length + 1
    }

    axios 
      .post('http://localhost:3001/persons', nameObject)
      .then (response => {
        setPersons(persons.concat(response.data))
        
      })
  }

  const handleOnSubmit = (event) => {
    console.log(event)

    event.preventDefault();
    const find = persons.find(persons => persons.name === newName)
    if (find === undefined) addName()
    else {
      window.alert(newName + " has been added ")
      setNewName('')
      setNewNumber('')
    }
  }


 


  const handleOnChangeName = (event) => {
    setNewName(event.target.value)
  }
  const handleOnChangeNumber = (event) => {
    setNewNumber(event.target.value)
  }
  const handleOnChangeFilter = (event) => {
    setNewFilter(event.target.value)
  }



  return (

    <div>
      <div>
        <h2>Phonebook</h2>

        <Filter setFilter={setFilter} handleOnChangeFilter={handleOnChangeFilter} />

      </div>
      <h2>add a new</h2>
      <PersonForm
        newName={newName}
        newNumber={newNumber}
        handleOnSubmit={handleOnSubmit}
        handleOnChangeName={handleOnChangeName}
        handleOnChangeNumber={handleOnChangeNumber}
      />


      <h2>Numbers</h2>
      {
        <Persons person={persons} setFilter={setFilter} />
      }
    </div>

  )
}

 export default App