0
356
ViewsValor POST del botón a través de Axios en ReactJS
Espero que estés bien.
Estoy tratando de averiguar cómo PUBLICAR el valor que obtengo de mi componente Button a través de axios a una API local.
Esto es lo que estoy tratando de lograr: 
Estoy tratando de enviar el valor del botón que en este caso es el 'día' y establecer 'estado' para abrir en esta API.
Así es como estoy obteniendo mis datos a través de axios: 
Código en formato de texto:
// Intitiate useState for opening Chocolate Day Box const [chocolateBox, setOpenChocolateBox] = useState(''); // Call on post method via axios const onSubmit = async (event) => { event.preventDefault(); // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, { // Sending in chocolateBox as value chocolateBox, }); setOpenChocolateBox(); }; Y aquí está el componente Botón en el que intento enviar el valor a través de: 
Código en texto:
<Grid item key={day.day}> <Button disabled={date <= day.day} // onSubmit function called here in Button onSubmit={onSubmit} // value to be sent to chocolateBox value={chocolateBox} key={day.day} sx={{ color: 'white', width: 150, height: 150, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} > {/* I want this value here of day.day to be sent through Post via axios */} {day.day} </Button> </Grid> Y aquí está el código en la API web: 
Todo lo que quiero enviar es el valor del botón actual como este:
{ "day": 1} Así es como se ve mi aplicación: 
Entonces, digamos, por ejemplo, que hago clic en el día calendario '2' como en la imagen, quiero que ese valor se publique a través de axios en ReactJS. Parece que no puedo hacer que funcione
Gracias por cualquier ayuda de antemano, tomen de ustedes mismos!
2 answers
Answer question0
Para resolver este problema hice esto:
// Intitiate useState for opening Chocolate Day Box const [chocolateBox, setOpenChocolateBox] = useState(''); // Call on post method via axios const openChocolate = async (event) => { event.preventDefault(); // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, { // Sending in event.target.value instead of chocolateBox day: event.target.value, }); setOpenChocolateBox(''); };Luego en el botón hice esto:
<Grid item key={day.day}> <Button disabled={date <= day.day} // I changed onSubmit to onClick since the component is not a form but a Button. I also changed value to day.day since I want to extract the value of day.day and not chocolateBox value={day.day} onClick={openChocolate} // value to be sent to chocolateBox key={day.day} sx={{ color: 'white', width: 150, height: 150, backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main', opacity: [0.9, 0.8, 0.7], }, }} > {/* I want this value here of day.day to be sent through Post via axios */} {day.day} </Button> </Grid>0
No sé si este es el problema al que te enfrentas. Puede publicar los datos cambiando el código como se muestra a continuación.
// Intitiate useState for opening Chocolate Day Box const [chocolateBox, setOpenChocolateBox] = useState(''); // Call on post method via axios const onSubmit = async (event) => { event.preventDefault(); // Url where to post await axios.post(`http://localhost:5001/open/chocolate`, // Sending in chocolateBox as value {"day": chocolateBox}, ); setOpenChocolateBox(); };