Quiero extraer algunos componentes y configurarlos en sus propios módulos. Quiero configurar hook() y addName() en sus propios módulos, pero no sé cómo llamar a las variables/funciones que usan.
Hasta ahora he intentado exportar mis variables setState, pero eso no funciona porque todavía necesito usarlas dentro de App() .
He intentado pasar 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¿Qué tal si les haces aceptar parámetros? Primero considerando addName , usa newName , newNumber , setPersons persons puedes definirlo como
const addName= (name, number, id, callback) => { const nameObject = { name, number, id } axios .post('http://localhost:3001/persons', nameObject) .then (response => { callback(response.data) }) }y en tu App.js llamas es como
const handleOnSubmit = (event) => { console.log(event) event.preventDefault(); const find = persons.find(persons => persons.name === newName) if (find === undefined) addName(newName, newNumber, persons.length + 1, (responsedata) => { setPersons(persons.concat(responsedata) }) else { window.alert(newName + " has been added ") setNewName('') setNewNumber('') } }