I’m creating this webapp that will eventually pull live JSON objects from a website, filter them based on some values like name or ID, then push them to a list for rendering. While I have a decent Java background, I’m still very new to React, and rusty in terms of JS and HTML/CSS. I’ve been following tutorials and looking at related questions on this site in order to set this up; so I apologize if there are any rookie errors!
I’ve created this Filter class here:
class Filter {
id;
filterName;
isChecked;
constructor(id, filterName, isChecked) {
this.id = id;
this.filterName = filterName;
this.isChecked = isChecked;
}
setupFilters() {
var filters = []
filters.push(new Filter("ACT_CLEAN", "Cleaning", false));
filters.push(new Filter("ACT_WOODCUT", "Chop Wood", false));
filters.push(new Filter("ACT_RUN", "Running", false));
filters.push(new Filter("ACT_EAT", "Eat a Meal", false));
filters.push(new Filter("ACT_IDLE", "Idle", false));
return filters;
}
getFilterID() {
return this.id;
}
getFilterName() {
return this.filterName;
}
setChecked(bool) {
this.isChecked = bool;
}
getChecked() {
return this.isChecked;
}
getCheckedFilters() {
var checkedFilters = []
for (var i = 0; i < this.filters.length; i++) {
if (this.filters[i].getChecked() == true) {
checkedFilters.push(this.filters[i]);
}
}
return checkedFilters;
}
}
export default Filter
export function getCheckedFilters(){}
export function setChecked(){}
export function getChecked(){}
export function getFilterId(){}
export function getFilterName(){}
export function setupFilters(){}
Which handles all information about a filter, including setting up the initial list of filters with setupFilters(), which is the subject of my question.
After exporting the setupFilters() function, I went over to my TaskList component and added the logic for rendering the list given active filters, as well as set a filter to true for some testing.
TaskList component:
class TaskList extends Component {
state = {
tasks: [],
loading: false
}
componentDidMount() {
this.setState({
loading: true
})
var activeFilters = setupFilters();
activeFilters[0].setChecked(true);
console.log("Filters: " + activeFilters);
axios.get(taskUrl)
.then((res) => {
for (var i = 0; i < activeFilters.length; i++) {
if (activeFilters[i].id == res.data && activeFilters[i].getChecked == true) {
this.setState({
tasks: res.data,
loading: false
})
}
}
})
.catch((err) => {
console.log(err)
})
}
render() {
const { tasks } = this.state
if (tasks.length === 0) {
return <p>No Tasks to Show.</p>
}
return (
<ListGroup>
{tasks.map(t => <TaskItem key={t.id} task={t} />)}
</ListGroup>
)
}
}
export default TaskList
However, and this is where my issue comes in… this function returns nothing, undefined. I check it within the scope of this component and it went from a function that would return filter[] to an alias function that was void. Did I export the function incorrectly in the Filter class? Should I call the function differently in a component versus another class or something else? I would appreciate any and all feedback on why this rather simple function doesn’t return anything.
