React - populate dropdown from array inside object and filter data - arrays

Question

everyone. I have a React App that is supposed to filter planetarium shows by different criteria. One of the criteria is supposed to have multiple values:
var shows = [
{ id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
{ id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
{ id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
{ id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
{ id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];
The "grade" property of the "shows" object can have multiple values, and I decided to put them in an array.
I need two things:
1 - I need to populate the "grade" dropdown with all the possible values, without repeated values;
2 - I need to be able filter shows according to what the user select in that dropdown, similar to what the "Show Type" and "Age" dropdowns. Any idea on how to do this? Thanks.
var shows = [
{ id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
{ id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
{ id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
{ id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
{ id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];
// FilterForm React Class
var FilterForm = React.createClass({
getInitialState: function() {
return {
data: this.props.data,
showType: '',
age: '',
grade: '',
}
},
filterItems: function(val, type){
switch (type) {
case 'showType':
this.setState({showType: val});
break;
case 'age':
this.setState({age: val});
break;
case 'grade':
this.setState({grade: val});
break;
default:
break;
}
},
render: function() {
var filteredItems = this.props.data;
var state = this.state;
["showType", "age", "grade"].forEach(function(filterBy) {
var filterValue = state[filterBy];
if (filterValue){
filteredItems = filteredItems.filter(function(item){
return item[filterBy] === filterValue;
});
}
});
var showTypeArray = this.props.data.map(function(item) {return item.showType});
var ageArray = this.props.data.map(function(item) {return item.age});
// This array gets once instance of all grade options since one show can be good for several grades
var gradeArray = this.props.data.map(function(item){
return item.grade;
});
showTypeArray.unshift("");
ageArray.unshift("");
gradeArray.unshift("");
return(
<div className="container">
<FilterOptions
data={this.state.data}
showTypeOptions={showTypeArray}
ageOptions={ageArray}
gradeOptions={gradeArray}
changeOption={this.filterItems} />
<div className="filter-form">
<FilterItems data={filteredItems} />
</div>
</div>
)
}
});
// FilterOptions React Class
var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},
render: function(){
return (
<div className="filter-options">
<div className="filter-option">
<label>Show Type</label>
<select id="showType" value={this.props.showType} onChange={this.changeOption.bind(this, 'showType')}>
{this.props.showTypeOptions.map(function(option) {
return ( <option key={option} value={option}>{option}</option>)
})}
</select>
<label>Age</label>
<select id="age" value={this.props.age} onChange={this.changeOption.bind(this, 'age')}>
{this.props.ageOptions.map(function(option) {
return ( <option key={option} value={option}>{option}</option>)
})}
</select>
<label>Grade</label>
<select id="grade" value={this.props.grade} onChange={this.changeOption.bind(this, 'grade')}>
{this.props.gradeOptions.map(function(option) {
return ( <option key={option} value={option}>{option}</option>)
})}
</select>
</div>
</div>
);
}
});
// FilterItems React Class
var FilterItems = React.createClass({
render: function(){
return(
<div className="filter-items">
<br />
{this.props.data.map(function(item){
return(
<div className="filter-item">{item.id} - {item.name} - {item.showType} - {item.age}</div>
);
})}
</div>
)
}
});
ReactDOM.render(
<FilterForm data={shows}/>,
document.getElementById('show-catalog')
);
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="show-catalog"></div>

Answer 1

1) You can get a set of unique values from an array using Set. For example,
var gradeArray = this.props.data.map(function(item){
return item.grade;
});
var uniqueGrades = Array.from(new Set(gradeArray));
2) What is not working about your current code?