As I am exploring the implementation of a filterPost feature using react and redux in my blog post, I encountered an issue. When attempting to create a function where users can click to list posts in a filter array, I faced an error that I have been trying to resolve. Being relatively new to React, I am working on strengthening my understanding of it.
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
topics: [
{ id: 1, title: "An Introduction to React", category: "React" },
],
filterPosts: [],
};
const searchSlice = createSlice({
name:"topic",
initialState,
reducers: {
filterTopics(state, action){
state.filterPosts = state.topics.filter((post)=>post.category === action.payload)
}
}
})
export const {filterTopics} = searchSlice.actions
export default searchSlice.reducer
This is the search details.
import React from 'react'
export default function SearchDetails({categoryChangeHandler,currentCategory}) {
const {topics} = useSelector(state=>state.search)
console.log(topics)
const categories = []
topics.map(post=>categories.push(post.category))
const categoryFinal = ["All categories", ...new Set(categories)]
return (
<ul className="list-group">
{categoryFinal.map((category) => (
<li
key={category}
className={
category === currentCategory
? "list-group-item active"
: "list-group-item"
}
onClick={() => categoryChangeHandler(category)}
>
{category}
</li>
))}
</ul>
)
}
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useState } from 'react'
import searchPost from '../../store/search-post'
import SearchDetails from './SearchDetails'
export default function SearchFilter() {
const [filter, setFilter] = useState(false)
const [currentCategory, setCurrentCategory ] = useState("")
const dispatch = useDispatch()
const categoryHandlerChanger = (category) =>{
setCurrentCategory(category)
if(category === "All category"){
setFilter(false)
}else{
dispatch(filterTopics(category))
setFilter(true)
}
}
return (
<div>
<searchPost filter={filter}/>
<SearchDetails
currentCategory={currentCategory}
categoryHandlerChanger={categoryHandlerChanger}
/>
</div>
)
}
export default function SearchPost({filter}) {
const {topics} = useSelector(state=>state.search)
const {filterTopics} = useSelector(state=>state.search)
console.log(topics)
return (
<div>
<p>{filter ? filterTopics.length : topics.length} of the {topics.length} posts</p>
{!filter && topics.map((post)=>(
<article key={post}>
{post.title}
</article>
))}
{filter && filterTopics.map((post)=>(
<article key={post}>
{post.title}
</article>
))}
</div>
)
}
SearchDetails.js:26
Uncaught TypeError: categoryChangeHandler is not a function
at onClick (SearchDetails.js:26:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
at executeDispatch (react-dom.development.js:9041:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
at processDispatchQueue (react-dom.development.js:9086:1)
at dispatchEventsForPlugins (react-dom.development.js:9097:1)
at react-dom.development.js:9288:1