Creo que hasta ahora he configurado las etiquetas de entrada en las que el usuario ingresará las cosas relevantes necesarias para que pueda extraer una imagen de la API de la NASA. No creo que el estado que tengo sea obtener la última información ingresada e imprimir en la consola la URL de la entrada del usuario. Creo que el problema puede estar relacionado con la forma en que uso el estado, pero no tengo idea de cómo hacerlo, incluso después de leer los documentos. Cualquier ayuda sería muy apreciada.
import './App.css'; import React, { useState } from 'react'; const getCamera = (c) => { const inputedCamera = c.target.value; console.log(inputedCamera); } const getRover = (r) => { const inputedRover = r.target.value; console.log(inputedRover) } const getDate = (d) => { const inputedDate = d.target.value; console.log(inputedDate); } const constructURL = (camera, rover, date) => { const userURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/" + rover + "/photos?earth_date=" + date + "&camera=" + camera + "&api_key=DEMO_KEY"; console.log(userURL) } const App = () => { const [photos, setPhotos] = useState(""); const [camera, setCamera] = useState(""); const [rover, setRover] = useState(""); const [date, setDate] = useState(""); const gettingInfo = () => { fetch(constructURL(camera, rover, date)) .then((response) => {setPhotos(response.json()['photos'])}) //sets values for photos .catch(() => console.log("Fetch Failed")) }; return ( <div className="App"> <header className="App-header"> <div id='container'> <div> <input type="text" id="date-picker" name="date-picker" placeholder="Enter a date" onChange={getDate}></input> <input type="text" id="rover" name="rover" placeholder="Enter a rover" onChange={getRover}></input> <input type="text" id="camera" name="camera" placeholder="Enter a camera" onChange={getCamera}></input> </div> <button onClick={console.log(gettingInfo)}>URL generator</button> </div> </header> <body> </body> </div> ); } export default App;Te falta el atributo de value dentro de la etiqueta de input . Usar:
<input type="text" id="rover" name="rover" value={rover} placeholder="Enter a rover" onChange={getRover}></input>También recomendaría que mueva sus métodos, es decir, getCamera, getRover, getDate dentro de la función de la aplicación.
También hay un mejor enfoque usando solo un estado con todos sus atributos y reemplazando todos los métodos con solo un método y luego usando value={state.rover} o cualquiera que sea el nombre de ese campo en particular. Es algo parecido a esto:
const onInputChange = (event) => { [event.target.name]: event.target.value } luego usándolo así: onChange={onInputChange}