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 Headerel segundo componente:
import './Imagelist.css' const Imagelist = () => { return ( <div className="Imagelist"> </div> ) } export default ImagelistPuede 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>