Entonces mi archivo App.js se ve así:
import React from "react"; import { useState } from "react"; import './App.css'; import Header from "./components/pages/Header"; import NAV from "./NAV"; import Trees from "./components/tree"; function App() { const [inputField , setInputField] = useState({ first_name: 'Phyag_NZFS3770' }) const inputsHandler = (e) =>{ setInputField( {[e.target.name]: e.target.value} ) } const submitButton = () =>{ alert(inputField.first_name) } return( <div className="App"> <NAV genomename={inputField.first_name}/> //this can't be done as the prop value is undefined <Header title="EumicrobeDB"/> <h3 style={{ textAlign:"left" }}> Organism List </h3> <div> <Trees /> </div> <div> <input type="text" name="first_name" onChange={inputsHandler} placeholder="enter the organism id" value={inputField.first_name}/> <button onClick={submitButton}>Submit Now</button> </div> </div> ) } export default App;¿Alguien puede modificar el código para pasar {inputField.first_name} como valor de apoyo a mi función llamada NAV? Estoy en un apuro absoluto... Soy un biólogo que es nuevo en React; quien tiene que cumplir un plazo
Así es como puede pasar datos del componente principal al secundario como props .
Ejemplo
import React from "react"; import { useState } from "react"; const Header = ({ title }) => { return <React.Fragment>Hello, {title}</React.Fragment>; }; function App() { const [inputField, setInputField] = useState({ first_name: "Phyag_NZFS3770" }); const inputsHandler = (e) => { console.log([e.target.name] , e.target.value); setInputField({ [e.target.name]: e.target.value }); }; const submitButton = () => { alert(inputField.first_name); }; return ( <div className="App"> <Header title={inputField.first_name} /> <h3 style={{ textAlign: "left" }}> Organism List </h3> <div> <input type="text" name="first_name" onChange={inputsHandler} placeholder="enter the organism id" value={inputField.first_name} /> <button onClick={submitButton}>Submit Now</button> </div> </div> ); } export default App;Su código en este componente se ve bien tal como está. Asegúrese de acceder a props.genomename y no a props.first_name en el componente NAV.
Si planea agregar más campos de entrada, también le sugiero que cambie la función inputHandler para fusionarla con el estado anterior, en lugar de reemplazarla por completo:
const inputsHandler = (e) => { setInputField({ ...inputField, [e.target.name]: e.target.value }) }