Entonces, lo que estoy tratando de hacer es pasar los datos recopilados en la barra de búsqueda del encabezado a otro componente para poder usarlo en ese componente como una consulta para la API que voy a usar.
el componente de encabezado:
import ImageSearchIcon from '@material-ui/icons/ImageSearch'; import './Header.css' function Header() { const [query, setQuery] = useState(""); const handleSubmit = (event) => { event.preventDefault(); } return ( <div className="Header"> {/* LOGO */} <div className="branding"> <ImageSearchIcon className="branding__logo" fontSize="large"/> <h1>Image Finder</h1> </div> {/* Search Bar */} <form onSubmit={handleSubmit}> <input type="text" id="header__searchbar" placeholder="Search For Images" value={query} onChange={(e) => setQuery(e.target.value)} /> </form> {/* USER ICON */} <img className="user__image" src="https://www.pngitem.com/pimgs/m/150-1503945_transparent-user-png-default-user-image-png-png.png" alt="user__image" /> </div> ) } export default Header
el segundo componente:
import './Imagelist.css' const Imagelist = () => { return ( <div className="Imagelist"> </div> ) } export default Imagelist
Puede pasar datos entre componentes primarios y secundarios en React usando props
(piense en los props
como los parámetros de los componentes).
Así es como se ven los props
de pase:
// Header component const Header = () => { // ... your logic return ( <ImageList myProp={query} /> ); } // ImageList component const ImageList = ({ myProp }) => { // now you can use myProp inside this component };
Puede obtener más información sobre accesorios y React en general aquí .
Además de la perforación de utilería (como lo menciona @Robfz): si puede usar la utilería en otros componentes nuevamente (o también si su componente secundario está muy lejos del principal), puede buscar en Context . Esto le permitiría pasar sus accesorios sin tener que pasarlos por todos los niños en el medio.
Levante el estado hasta el componente principal que a) realiza la solicitud de la API y administra los datos, y b) representa tanto el Header
como la lista de ImageList
.
La App
mantiene el estado de los datos principales. Pasa un controlador a Header
que se llama cuando se hace clic en el botón Header
. Cuando se llama a ese controlador, se llama a la API y se devuelve la imagen JSON. Luego, el estado de la App
se actualiza con esos datos (analizados).
ImageList
recibe estos datos a través de un accesorio "imágenes". Utiliza el mapa para obtener el valor src
de cada objeto devuelto y devolver una nueva imagen.
Aquí hay un breve ejemplo de trabajo que explica cómo abordaría este problema.
const { useState } = React; // Sample JSON data const json = '[{ "src": "https://dummyimage.com/100x100/77aa77/fff&text=Image" },{ "src": "https://dummyimage.com/100x100/7777aa/fff&text=Image" },{ "src": "https://dummyimage.com/100x100/aa7777/fff&text=Image" }]'; // Using a mock API to return some JSON // after a two-second wait function mockApi() { return new Promise((res, rej) => { setTimeout(() => res(json), 2000); }); } // ImageList receives an array of objects from App // and maps over it creating a new image on each iteration function ImageList({ images }) { return ( <div className="imagelist"> {images.map(img => <img src={img.src} />)} </div> ) } // App passes in the `handleUpdate` handler as a prop function Header({ handleUpdate }) { // Header maintains its own state for the input const [input, setInput] = useState(''); // When the input changes we update the state function handleChange(e) { setInput(e.target.value); } // When the button is clicked the `handleUpdate` // handler passed down from App is called with // the current state function handleClick() { handleUpdate(input); } return ( <div> Search: <input type="text" value={input} onChange={handleChange} /> <button onClick={handleClick}>Search</button> </div> ); } function App() { // Maintains the image state const [images, setImages] = useState([]); // When the button in Header is clicked this // handler is called. It makes an API call with the // value: fetch(`${endpoint}/${value}`), and then // sets the state with the data function handleUpdate(value) { console.log(`Query: ${value}`); mockApi() .then(json => JSON.parse(json)) .then(data => setImages(data)); } return ( <div> <Header handleUpdate={handleUpdate} /> <ImageList images={images} /> </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>