Tengo un componente Header.js que tiene una entrada y un botón, cuando presiono el botón obtendrá datos de una API de terceros. Luego quiero exportar la respuesta a otro componente.
Componente Header.js como tal:
import React, { useState } from 'react'; import Axios from 'axios'; const Header = () => { const [ticker, setTicker] = useState(''); let url = `https://cloud.iexapis.com/stable/stock/${ticker}/quote?token=${process.env.REACT_APP_API_KEY}`; const getData = () => { Axios.get(url) .then((response) => { console.log(response.data); return response.data; }) .catch(function(error) { console.log(error); }) } const handleKeypress = (e) => { if(e.keyCode === 13) { getData(); } } return ( <div className='header'> <h1 id='brand'>Stock Tracker: {ticker}</h1> <div className='input-flow'> <input onChange={e => setTicker(e.target.value)} onKeyDown={handleKeypress} className='ticker-input' type='text' placeholder='Ticker Symbol' maxLength='5' minLength='1'/> <button className='add' onClick={getData} type='submit'>Add</button> </div> </div> ) } export default Headeractualice el estado cuando reciba datos de su API en su función getData y pase el estado a su otro componente con accesorios
Asumiré que el componente se importará y renderizará dentro de Header.js.
Puede utilizar useState para mantener un valor nulo que se actualizará a los datos obtenidos. Una vez que los datos estén disponibles, actualizará el estado de su valor vacío y ese valor se puede pasar al componente representado.
Luego tendrá acceso a esos datos a través de los accesorios del nuevo componente.
import React, { useState } from 'react'; import Axios from 'axios'; import MyComponent from './MyComponent'; const Header = () => { const [ticker, setTicker] = useState(''); const [myData, setMyData] = useState(null); let url = `https://cloud.iexapis.com/stable/stock/${ticker}/quote?token=${process.env.REACT_APP_API_KEY}`; const getData = () => { Axios.get(url) .then((response) => { console.log(response.data); setMyData(response.data) }) .catch(function(error) { console.log(error); }) } const handleKeypress = (e) => { if(e.keyCode === 13) { getData(); } } return ( <div className='header'> <h1 id='brand'>Stock Tracker: {ticker}</h1> <div className='input-flow'> <input onChange={e => setTicker(e.target.value)} onKeyDown={handleKeypress} className='ticker-input' type='text' placeholder='Ticker Symbol' maxLength='5' minLength='1'/> <button className='add' onClick={getData} type='submit'>Add</button> </div> {myData && <MyComponent myData={myData} />} </div> ) } export default HeaderSi el componente existe fuera de Header.js, es posible que deba actualizar el estado de un componente principal común, utilizar Redux o Context .
Según su descripción, parece que necesita mantener el estado en un componente principal y también un controlador que realiza la llamada a la API. Pasa el controlador al Header , que se llama cuando se hace clic en el botón. El controlador realiza la llamada a la API y actualiza el estado. Luego, ese estado se representa en el otro componente ( Main ).
const { useState } = React; function App() { const [ data, setData ] = useState([]); function handleClick() { // Simulated fetch statement - returns data const data = [{ id: 1, name: 'Bob' }, { id: 2, name: 'John' }]; setData(data); } return ( <div> <Header handleClick={handleClick} /> <Main data={data} /> </div> ); }; function Header({ handleClick }) { return ( <button type="button" onClick={handleClick} >Get data </button> ); } function Main({ data }) { return data.map(obj => { return <div key={obj.id}>{obj.name}</div> }); } ReactDOM.render( <App />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>