Skip to main content
1 de 2
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Ésta pregunta nuevamente se puede solucionar usando Context como te lo expliqué en tu pregunta anterior.

El método para filtrar puede ser definido en el padre de los filtros y la tabla. Éste método puede recibir el nuevo valor seleccionado en el componente filtros y, será actualizado en el estado del padre. Al actualizarse el estado del padre, la entrada del contexto llamada category será reflejada en todos los hijos que hayan especificado que esté disponible.

En el siguiente caso, se hace un filtrado por id de categoría.

class Filters extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      categories: []
    }
  }
  
  componentDidMount () {
    let categories = [
      {
        name: 'All categories',
        id: 0
      },
      {
        name: 'Computadoras',
        id: 1
      },
      {
        name: 'Televisores',
        id: 2
      },
      {
        name: 'Consolas',
        id: 3
      }
    ];
    this.setState({ categories });
  }
  
  render () {
    return (
      <select onChange={this.onChange.bind(this)}>
        {
          this.state.categories.map(c => 
            <option value={c.id}>{c.name}</option>
          )
        }
      </select>
    );
  }
  onChange (e) {
    this.context.applyFilters(parseInt(e.target.value));
  }
}

Filters.contextTypes = {
  applyFilters: React.PropTypes.func
};

class Products extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      products: []
    };
  }
  
  componentDidMount () {
    let products = [
      {
        name: 'TV Samsung Curve',
        price: 1099.90,
        category: 2
      },
      {
        name: 'Play Station 4',
        price: 1899.90,
        category: 3
      },
      {
        name: 'Dell XPS 13',
        price: 1999.90,
        category: 1
      },
      {
        name: 'XBox 360 S',
        price: 769.90,
        category: 3
      }
    ];
    let categories = [
      {
        name: 'Computadoras',
        id: 1
      },
      {
        name: 'Televisores',
        id: 2
      },
      {
        name: 'Consolas',
        id: 3
      }
    ];
    this.setState({ products, categories });
    this.backup = products;
    this.category = 0;
  }
  componentWillUpdate (props, state, ctx) {
    if (this.category !== ctx.category) {
      this.category = ctx.category;

      // 0 = se muestra todo
      if (this.category === 0) {
        this.setState({
          products: this.backup
        });
      }
      else {
        let products = this.backup.filter(p => (
          p.category === this.category
        ));
        this.setState({ products });
      }
    }
  }
  getCategoryName (id) {
    let cat = this.state.categories.filter(c => (
      c.id === id
    ));
    return cat[0].name;
  }
  render () {
    return (
      <table>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Precio</th>
            <th>Categoría</th>
          </tr>
        </thead>
        <tbody>
          {
            this.state.products.map(p => (
              <tr>
                <td>{p.name}</td>
                <td>{p.price}</td>
                <td>{this.getCategoryName(p.category)}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    )
  }
}

Products.contextTypes = {
  category: React.PropTypes.number
};

class Parent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      category: 0
    };
  }
  getChildContext () {
    let _this = this;
    return {
      category: this.state.category,
      applyFilters (category) {
        _this.setState({category });
      }
    };
  }
  render () {
    return (
      <div className="data">
        <Filters />
        <Products />
      </div>
    )
  }
}

Parent.childContextTypes = {
  category: React.PropTypes.number,
  applyFilters: React.PropTypes.fn
};

ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);
body {
  padding: 1.5rem;
}
select {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: .5rem 1rem;
}
table {
  border-collapse: collapse;
  margin-top: 30px;
  width: 100%;
}
table thead {
  border-bottom: 2px solid #ccc;
}
table th, table td {
  padding: .5rem .75rem;
}
table tr:not(:last-of-type) {
  border-bottom: 1px solid #eee;
}
table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
<div id="app"></div>

El código es relativamente sencillo. Cuando se elije una categoría en el componente Filters se envía al padre, éste actualiza su estado y a la vez, el contexto. Los hijos recibirán la "notificación" que se ha actualizado el contexto y, en el componente Products se recibe éste nuevo valor vía el hook componentWillMount. Éste componente tiene un backup de los products que será usado para filtrarlos y para, en caso se seleccione "todas las categorías", se asigna el backup al estado.

En éste Pen puedes ver el ejemplo funcionando.

gugadev
  • 19.1k
  • 1
  • 27
  • 49