useState updates state on second click - reactjs

Question

I've seen that this issue has been asked many times before but none of the answers make sense to me. After trying about every solution i could find, decided i'd just ask it myself.
Below is my code, the main issue being that in the DOM filteredData only changes on second click. Note, projs is the prop containing data fetched that gets filtered out and displayed
const langs = ["react", "next js", "material-ui", "tailwind css", "firebase"];
const [projectData, setProjectData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [category, setCategory] = useState("");
useEffect(() => {
setProjectData(projs);
}, []);
const handleCategory = (res) => {
setCategory(res.data);
const filter = projectData.filter((data) => data.category === category);
setFilteredData(filter);
};
button:
{langs.map((data, index) => (
<button
key={index}
class="px-2 sm:px-6 py-2 ring-2 font-semibold ring-portfBtnLight rounded-md transform hover:scale-110 transition duration-500"
onClick={() => handleCategory({ data })}
>
{data}
</button>
))}
I'm pretty lost at the moment, any help would be greatly appreciated

Answer 1

You can't use the newly set value of a state in the same render cycle. To continue calling both setState calls in the same handler you need to use the category from res.data to generate the new filtered array and then set both.
const handleCategory = (res) => {
const filter = projectData.filter((data) => data.category === res.data);
setCategory(res.data);
setFilteredData(filter);
};
const { useState, useEffect } = React;
function App({ projs }) {
const langs = ["react", "next js", "material-ui", "tailwind css", "firebase"];
const [projectData, setProjectData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [category, setCategory] = useState("");
useEffect(() => {
setProjectData(projs);
}, [projs]); // need to watch for change as props won't update this automatically. Setting state from props is somewhat of an anti-pattern
const handleCategory = (res) => {
const filter = projectData.filter((data) => data.category === res.data);
setCategory(res.data);
setFilteredData(filter);
};
return (
<div className="App">
{langs.map((data) => (
<button
key={data} // avoid using index as key as this will lead to erros in updating.
class={(data === category ? 'selected ' : '') + "px-2 sm:px-6 py-2 ring-2 font-semibold ring-portfBtnLight rounded-md transform hover:scale-110 transition duration-500"}
onClick={() => handleCategory({ data })}
>
{data}
</button>
))}
<div>
<h3>{category}</h3>
{filteredData.length
? filteredData.map(p => (
<div>
<p>{p.value} – {p.category}</p>
</div>
))
: <p>No projects match</p>}
</div>
</div>
);
}
const projectData = [{ id: 1, value: 'Project 1', category: 'react' }, { id: 2, value: 'Project 2', category: 'next js' }, { id: 3, value: 'Project 3', category: 'react' }, { id: 4, value: 'Project 4', category: 'material-ui' }]
ReactDOM.render(
<App projs={projectData} />,
document.getElementById("root")
);
.selected {
background-color: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Alternatively, update filteredData in a useEffect that watches for changes to either category or projectData
useEffect(() => {
setFilteredData(projectData.filter((data) => data.category === category));
}, [category, projectData]);
const handleCategory = (res) => {
setCategory(res.data);
};
const { useState, useEffect } = React;
function App({ projs }) {
const langs = ["react", "next js", "material-ui", "tailwind css", "firebase"];
const [projectData, setProjectData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [category, setCategory] = useState("");
useEffect(() => {
setProjectData(projs);
}, [projs]); // need to watch for change as props won't update this automatically. Setting state from props is somewhat of an anti-pattern
useEffect(() => {
setFilteredData(projectData.filter((data) => data.category === category));
}, [category, projectData]);
const handleCategory = (res) => {
setCategory(res.data);
};
return (
<div className="App">
{langs.map((data) => (
<button
key={data}
class={(data === category ? 'selected ' : '') + "px-2 sm:px-6 py-2 ring-2 font-semibold ring-portfBtnLight rounded-md transform hover:scale-110 transition duration-500"}
onClick={() => handleCategory({ data })}
>
{data}
</button>
))}
<div>
<h3>{category}</h3>
{filteredData.length
? filteredData.map(p => (
<div>
<p>{p.value} – {p.category}</p>
</div>
))
: <p>No projects match</p>}
</div>
</div>
);
}
const projectData = [{ id: 1, value: 'Project 1', category: 'react' }, { id: 2, value: 'Project 2', category: 'next js' }, { id: 3, value: 'Project 3', category: 'react' }, { id: 4, value: 'Project 4', category: 'material-ui' }]
ReactDOM.render(
<App projs={projectData} />,
document.getElementById("root")
);
.selected {
background-color: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
As noted in the snippets –
Setting state from props is a bit of anti-pattern, but if you must you should add the prop to the dependency array so that state will be updated should the prop change. (prop changes don't force remounting).
Also, avoid using index as key, especially when mapping arrays whose order/membership will change as React will not update as expected.

Answer 2

I think this is the issue
setCategory(res.data);
const filter = projectData.filter((data) => data.category === category);
You invoke setCategory. But that won't change the immediate value of category that you reference in the subsequent line.
I think you want this:
const updatedCategory = res.data;
setCategory(updatedCategory);
const filter = projectData.filter((data) => data.category === updatedCategory);
Also, is res.data actually the "category" thing you want to use? I'm just asking because you use data between so many variables, parameters, and object members, I can't help but to wonder if it's really a typo.