Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

146
Vistas
Reaccionar pasando la entrada del componente de búsqueda a App.js principal

Estoy tratando de crear una aplicación que busque la API de la base de datos de películas. Tengo la función de búsqueda principal en App.js. En los tutoriales, las personas que usan la barra de búsqueda en este componente principal de la aplicación. ¿No es mejor usar la barra de búsqueda del componente Navbar por separado y luego pasar ese valor a la aplicación principal donde está la función de búsqueda y cambiar esa función según el valor buscado? ¿Hay alguna forma de pasar ese valor de entrada sin Redux? Busqué en Google "estado de elevación", pero estoy un poco confundido :) Gracias Main App.js

 const [movies, setMovies] = React.useState([]); const example = [1, 2, 3]; React.useEffect(() => { console.log("hehe"); fetch( "https://api.themoviedb.org/3/trending/all/week?api_key=564564564" ) .then((res) => res.json()) .then((data) => { console.log(data); setMovies(data.results); }); }, []); return ( <div> <Navbar /> <div className="container1"> <div className="movie"> {movies.map((movieReq) => ( <Movieinfo key={movieReq.id} {...movieReq} /> ))} </div> </div> </div> ); } export default App;

Aquí está la barra de navegación con la barra de búsqueda y el valor de entrada que quiero pasar a App.js

 import "./Navbar.css"; function Navbar() { return ( <div> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand">Navbar</a> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"> Search </button> </form> </nav> </div> ); } export default Navbar;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Hay dos formas simples de resolver su problema.

  1. Composición ( Leer aquí )

Puede poner todo su inicio de sesión en app.js y crear otros dos componentes, main.js y nav.js. Puede pasar el estado como accesorios a ambos componentes.

 function App() { const [movies, setMovies] = useState([]); const [search, setSearch] = useState([]); return ( <> <Main movies={movies} setMovies={setMovies}/> <Navbar search={search} setSearch={setSearch} /> </> ) } function Main({movies, setMovie}) { return ( <> // you can render here </> ) } function Main({search, setSearch}) { return ( <> // change the search here </> ) }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  1. Contexto (Mi favorito personal) Esta es una característica muy poderosa, debes probarla. Aquí hay una plantilla de configuración inicial que puede usar. Mira esto
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda