I'm not sure which type to designate here.
"HowitterObject" in setHowitters is data and "...prev' is the continuous addition of data from howitterObject.
interface IhowitterMessage {
message: string;
createAt: number;
id: string;
}
const Home = () => {
const [howitters, setHowitters] = useState<IhowitterMessage[]>([]);
const getHowitters = async () => {
const dbHowitter = await dbService.collection("howitter").get();
dbHowitter.forEach((document) => {
const howitterObject = {
...document.data(),
id: document.id,
};
setHowitters((prev: ???) => [howitterObject, ...prev]); //What should I put in the "prev" type?
});
};
useEffect(() => {
getHowitters();
}, []);
return(
<div>
{howitters.map((howitter: IhowitterMessage) => (
<div key={howitter.id}>
<h4>{howitter.message}</h4>
</div>
))}
</div>
);
};
If you console.log(howitters), it is as follows.
(3) [{...}, {...}, {...}]
0: {message: "no", createAt: 1631367025550, id: "q2d9TTgh36mgFZwMQ5EA"}
1: {createAt: 1631365463319, message: "Good", id: "nCABFp1v3dP73gIbckpp"}
2: {message: "hey", createAt: 1631367021665, id: "dmNBa6C8NwhDQDYDOP36"}
It's similar to your state's type
Because prev is your previous state of howitters so you could put IhowitterMessage[] there too:
setHowitters((prev: IhowitterMessage[]) =>