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}