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;