1

Estimada Red, tengo el problema en donde actualmente estoy realizando un this state data map, en donde obtengo los datos de una api previamente construida.

El problema es la fecha que se obtiene se muestra formato 2021-10-16T00:00:00 pero su origen es de tipo Date.

Mi código es el siguiente (Revisar this.state.data.map(pedidoinsumo):

<div className="App">
                <br/>
                <button className="btn btn-success" onClick={()=>{this.setState({form: null,  tipomodal:'insertar'}); this.modalInsertar()}}>Agregar Nuevo Pedido de Insumos</button>
                <br/>  <br/>
                <table className="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>CÓDIGO</th>
                            <th>PROVEEDOR</th>
                            <th>FECHA</th>
                            <th>ESTADO PEDIDO</th>

                        </tr>
                    </thead>
                    <tbody>
                       {this.state.data.map(pedidoinsumo=>{
                            return(
                                <tr>
                                    <td>{pedidoinsumo.ID}</td>
                                    <td>{pedidoinsumo.CODIGO}</td>
                                    <td>{pedidoinsumo.PROVEEDORID}</td>
                                    <td>{pedidoinsumo.FECHA}</td>
                                    <td>{pedidoinsumo.ESTADOPEDIDOID}</td>
                                    <td>{pedidoinsumo.ACTIVO}</td>
                                    <td>

1 respuesta 1

0

El formato está perfecto. Simplemente está llegando como una cadena de texto, cosa que es normal también.
Un modo rápido y simple de resolver ese problema es crear un Date a partir de esa cadena de texto (no confundir con el Date del lado del servidor/API), y luego darle un formato más apropiado para presentación. Por ejemplo:

<td>{ new Date(pedidoinsumo.FECHA).toLocaleDateString() }</td> 
{ //resultado: 10/16/2021 }

<td>{ new Date(pedidoinsumo.FECHA).toLocaleString() }</td> 
{ //resultado: 10/16/2021, 12:00:00 AM }   

<td>{ new Date(pedidoinsumo.FECHA).toDateString() }</td> 
{ //resultado: Sat Oct 16 2021 }

Tenga en cuenta que hay casos en los que estas transformaciones de datos es recomendable analizarlas para escoger bien el lugar donde se van a realizar. Y es que pueden traer problemas de rendimiento, o pueden afectar la arquitectura del sistema.

Referencias
Everything You Need to Know About Date in JavaScript
Best place to apply API response transformation

2
  • Muchas Gracias , funciono perfectamente Commented el 18 oct. 2021 a las 14:48
  • @NicolasAlejandroTennettTapi con gusto! Si puede marque la respuesta como aceptada (clic en la marca de verificación junto a la respuesta). Saludos
    – eniel.rod
    Commented el 19 oct. 2021 a las 16:46

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.