0

Lo que pasa es que quiero crear un componente para un rango de fechas, y que este me retorne las dos fechas(inicial,fin).

He podido logar mi cometido con un pequeño error, lo que sucede es que el componente me retorna un valor anterior al actual. Cada vez que se ejecuta onChange este debería de retornar los valores actuales pero no lo hace. Ejemplo de lo que sucede:

-----------------------------------
   accion           |   inicial     |    fin     | retorna
----------------------------------------------------------------------
 valores iniciales  |  2020-09-23   |  2020-09-23  | sin acciones aun
----------------------------------------------------------------------
 cambio inicial     |  2020-09-26   |  2020-09-23  | inicial:2020-09-23, fin:2020-09-23
----------------------------------------------------------------------
 cambio fin         |  2020-09-26   |  2020-09-29  | inicial:2020-09-26, fin:2020-09-23
----------------------------------------------------------------------
 cambio inicial     |  2020-09-25   |  2020-09-23  | inicial:2020-09-26, fin:2020-09-29

Espero se entienda, pero para mejor entendimiento dejo el link del codigo funcionado Codigo Aqui en codesandbox

Igual dejo por aqui como llamo a mi componente:

<DateRange
    getDates={(inicial, fin) => {
      console.log("desde principal", inicial, fin);
    }}
  />

Y el componente

import React, {useEffect,useState} from 'react'
import {getCurrentDate} from '../../functions/Fecha'
const DateRange=({getDates})=>{
    let [inicial,setInicial]=useState(getCurrentDate())
    let [fin,setFinal]=useState(getCurrentDate())
    
    const setChange = (tipo,e) => {
        setInicial(e.target.value)
        setFinal(e.target.value)
        console.log("desde el date rango")
        getDates(inicial,fin)
    }
    return <React.Fragment>
                <div className="col-6">
                    <input 
                        type="date" 
                        min={getCurrentDate()} 
                        value={inicial} 
                        onChange={(e)=>{setChange("inicial",e)}} 
                        className="input-small form-control" 
                        placeholder="Ingreso"/>
                </div>
                <div className="col-6">
                    <input 
                        type="date" 
                        value={fin} 
                        onChange={(e)=>{setChange("fin",e)}} 
                        className="input-small form-control" 
                        placeholder="Salida" />
                </div>
            </React.Fragment>
}
export default DateRange;

1 respuesta 1

2

No sé exactamente que está pasando, supongo que tiene que ver con cómo funciona el ciclo de vida del hook useState. Sin embargo, si quieres detectar un cambio en alguno de los dos estados puedes usar useEffect, la implementación sería nadamás de agregar el hook así:

const DateRange = ({ getDates }) => {
  let [inicial, setInicial] = useState(getCurrentDate());
  let [fin, setFinal] = useState(getCurrentDate());

  useEffect(() => {
    getDates(inicial, fin);
  }, [inicial,fin]);

  const setChange = (tipo, val) => {
    tipo === "inicial" && setInicial(val);
    tipo === "fin" && setFinal(val);
  };

Ah y no olvides hacer el import:

import React, { useState, useEffect } from 'react';

Espero que te sirva! Suerte programando!

1
  • 1
    Joder!! que bueno, al final ya ni se necesita la funcion setChange, buena respuesta👍.
    – Shassain
    Commented el 23 sept. 2020 a las 18:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.