1

Tengo un componente que viene a ser un <select> que muestra todas las categorias, y necesitaria hacerlo funcionar digamos con react para poder filtrar por categorias los demos.

Este es el componente del select

import React from 'react';

class Category extends React.Component {

constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount() {

        fetch('http://localhost:3000/api/categories')
          .then(result => result.json())
          .then(items => {this.setState({items});
        });
}

  render() {
     return ( 
<div>
    <center>
        <select>
            <option default> ---- Select Category ---- </option>

            {this.state.items.length ?
            this.state.items.map(item=>

            <option>{item.name}</option>
            
                ) 
            : <li>Loading...</li>
          }
        </select>
    </center>
</div>
     );
  }
}

export default Category;

Y este el del contenido a filtrar

import React from 'react';
var imgdir = '../../../assets/images/';


class Content extends React.Component {

    constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount(){
    fetch(`http://localhost:3000/api/demos`)
        .then(result=>result.json())
    .then(items=>this.setState({items}))
  }
  render() {
    return(
        <ul>
          {this.state.items.length ?
            this.state.items.map(item=>

                <div id="1" className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src={imgdir + item.img} alt={item.name} />
            <div className="overlay">
                <h2>{item.name}</h2>
                <p> 
                    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
                </p> 
                <p> 
                    <a href="#">VIEW DEMO</a>
                </p> 
            </div>
    </div>
</div>

                ) 
            : <li>Loading...</li>
          }
      </ul>
   )
  }
}

export default Content;

Cada categoria tiene una id en su base de datos, y cada div como ven tiene una id que en este caso se la asigno manualmente porque aun no hice la parte para obtener esa id de la DB pero salteando esto, me gustaria saber como hacer que este filtrado funcionara.

PD: la id de la categoria se puede obtener usando {item.id}

1 respuesta 1

1

É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.

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.