Tengo una serie de meses que estoy mostrando a lo largo del eje x de un gráfico. Usando el paquete date-fns para formatear las fechas.

En this.props.data :

 [ { "month": 11, "year": 2020, }, { "month": 12, "year": 2020, }, ... ]

Un método crea una matriz de nodos DOM:

 renderXAxis() { const items = []; if (this.props.data.length) { for (const data of this.props.data) { const month = formatDate(setMonth(new Date(), data.month - 1), 'MMM'); items.push( <div className="Chart__x-axis__item" key={month + data.year}> <div className="Chart__x-axis__item__month">{month}</div> </div>, ); } } return items; }

En mi método de renderizado, llamo:

 <div className="Chart__x-axis">{this.renderXAxis()}</div>

Representa el xAxis con todos los elementos que muestran el mismo mes. Lo que es extraño para mí es que si cambio el nodo DOM que se envía a la matriz de elementos a:

 items.push( <div className="Chart__x-axis__item" key={month + data.year}> <div className="Chart__x-axis__item__month">{`${month}`}</div> </div>, );

o

 items.push( <div className="Chart__x-axis__item" key={month + data.year}> <div className="Chart__x-axis__item__month">{formatDate(setMonth(new Date(), data.month - 1), 'MMM')}</div> </div>, );

entonces todos los meses se rinden como deberían. no entiendo porque o que pasa..