1

Estoy trayendo noticias dinámicamente mediante una API y le di estilo a mi proyecto con la librería de Material Design MUICss. Creo un Container, que dentro tiene su Row correspondiente, pero tengo dudas en cuanto a las columnas. Estas se generan dinámicamente, iterando sobre la cantidad de noticias que haya y crea una por cada una. En este momento estoy trabajando con Col="md-4", pero el layout no queda bien ya que genera muchas columnas dentro del Row, cuando en realidad deberían ser sólo 3 por Row. El problema es que no sé cómo hacer esto, ya que se generan dinámicamente.

El componente que contiene a cada una de las noticias:

import React, { Component } from 'react';
import SingleArticle from './SingleArticle';
import Row from 'muicss/lib/react/row';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import PropTypes from 'prop-types';

class News extends Component {
    render() { 
        return ( 
            <Row>
                <TransitionGroup>
                    {this.props.news.map(singleArticle => (
                        <CSSTransition
                            key={singleArticle.url}
                            classNames="fade"
                            timeout={500}
                        >
                            <SingleArticle 
                                singleArticle={singleArticle}
                            />
                        </CSSTransition>
                    ))}
                </TransitionGroup>
            </Row>
         );
    }
}

News.propTypes = {
    news: PropTypes.array.isRequired
}

export default News;

El componente de la noticia única:

import React from 'react';
import Panel from 'muicss/lib/react/panel';
import Col from 'muicss/lib/react/col';
import PropTypes from 'prop-types';

const SingleArticle = (props) => {
    const { urlToImage, url, description, title } = props.singleArticle;

    const image = (urlToImage) ? <img src={urlToImage} alt={title} /> : '';
    return (
        <Col md="4">
            <Panel>
                {image}
                <h3>{title}</h3>
                <p>{description}</p>
                <a href={url}>+</a>
            </Panel>
        </Col>

      );
};

SingleArticle.propTypes = {
    singleArticle: PropTypes.shape({
        urlToImage: PropTypes.string,
        url: PropTypes.string,
        description: PropTypes.string,
        title: PropTypes.string
    })
}

export default SingleArticle;

1 respuesta 1

1

La clave para tu problema es usar la función módulo o resto (%) al momento de iterar tu lista de noticias.
Considera la siguiente solución:

class News extends Component {
  renderArticle(singleArticle) {
    return (
      <CSSTransition key={singleArticle.url} classNames="fade" timeout={500}>
        <SingleArticle singleArticle={singleArticle} />
      </CSSTransition>
    );
  }

  renderRow(articles) {
    return (
      <Row>
        <TransitionGroup>{articles}</TransitionGroup>
      </Row>
    );
  }

  renderRows() {
    const { news } = this.props;
    let articles = [];
    let rows = [];

    for (let i = 0; i < news.length; i++) {
      const singleArticle = news[i];
      // Deberías acumular artículos para eventualmente agregarlos a la fila
      articles.push(this.renderArticle(singleArticle));
      // Se realiza % 3, ya que necesitas un comportamineto distinto cada tres
      // elementos, específicamente en la tercera iteración (i = 2, 5, 8, etc...)
      // es cuando deberías crear la fila y agregar los artículos acumulados
      if (i % 3 == 2) {
        rows.push(this.renderRow(articles));
        // Y luego vaciar el arreglo de artículos, ya que ya fueron agregados a
        // la nueva fila
        articles = [];
      }
    }
    // En caso de que haya quedado algún artículo sin agregar al arreglo de filas,
    // se agregará en esta última etapa
    if (articles.length > 0) {
      rows.push(this.renderRow(articles));
    }
    return rows;
  }

  render() {
    return <div>{this.renderRows()}</div>;
  }
}
1
  • 1
    Funcionó a la perfección. No se me había ocurrido ese razonamiento. ¡Muchas gracias! el 30 ene. 2019 a las 18:57

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.