04 Creación del componente BoardTile

En el paso anterior creamos un componente para mostrar todos los boards. En este paso vamos a extraer a un componente cada uno de ellos.

Comenzemos por ver como está conformada nuestra aplicación actualmente:

Se puede ver como cada board es simplemente un <li> en nuestro HTML. En este paso, nos dedicaremos a crear un nuevo componente que englobe a cada board. Al final del paso se adjunta una imágen con el resultado final.

Creamos el componente BoardTile

Creamos el archivo src/components/BoardTile.js, cuyo contenido debería ser:

import React, { Component } from 'react';

class BoardTile extends Component {
  render() {
    return (
      <li className="BoardTile">
        <a className="BoardTile-link">
          <span className="BoardTile-fade"></span>
          <span className="BoardTile-details">
            <span className="BoardTile-details-name">
              {this.props.name}
            </span>
          </span>
        </a>
      </li>
    );
  }
}

export default BoardTile;

Invocamos el componente BoardTile desde nuestro componente Boards.js

Editamos el archivo src/components/Boards.js importando el nuevo componente, para ello agregamos la siguiente línea:

  import React, { Component } from 'react';
+ import BoardTile from './BoardTile';

Y luego, lo invocamos, pasándole el nombre de cada board en particular:

<ul className="Boards-list-container">
  {
    this.state.boards.map((board) => {
      // ######## Agregar: COMIENZO bloque
      return <BoardTile key={board.id} id={board.id} name={board.name} />
      // ######## Agregar: FIN bloque

      // ######## Quitar: COMIENZO bloque
      return (
        <li className="BoardTile" key={board.id}>
          <a className="BoardTile-link">
            <span className="BoardTile-fade"></span>
            <span className="BoardTile-details">
              <span className="BoardTile-details-name">
                {board.name}
              </span>
            </span>
          </a>
        </li>
      )
      // ######## Quitar: FIN bloque

    })
  }
  <li className="NewBoardLink">
    <a className="NewBoardLink-link">
      Create new board…
    </a>
  </li>
</ul>

Probamos en el browser:

Observación: Notar como nuestro <li> que mencionábamos al comienzo de este paso se "convirtió" en nuestro nuevo componente BoardTile

---

Commit en git

git add -A
git commit -m "Componentizar el listado de boards"

---

Siguiente: 5. Navegación