How to delete array of objects in react native using useState hook? - arrays

Question

I am a beginner in react native. I am stuck as I am unable to create a button which calls the function delBlogPost which would delete the last element in array of blogPosts. I want to use useState hook to delete the element. It would be helpful if anyone can help me with this. Here is the code:
BlogContext.js
import React, {useState} from 'react';
const BlogContext = React.createContext();
export const BlogProvider = ({ children }) => {
const [blogPosts, setBlogPosts] = useState([]);
const addBlogPost = () => {
setBlogPosts([...blogPosts, {title: `Blog Post #${blogPosts.length+1}`}]);
};
{/* I want to create a delBlogPost function here which would delete the last element in array of objects*/}
const delBlogPost = () => {
};
return (
<BlogContext.Provider value={{data: blogPosts, addBlogPost, delBlogPost }}>
{children}
</BlogContext.Provider>
);
};
export default BlogContext;
This is where I am creating the button to delete. Just like add blogpost button I want to have delete post button using useState.
IndexScreen.js
import React, { useContext } from 'react';
import { View, StyleSheet, Text, FlatList, Button} from 'react-native';
import BlogContext from '../context/BlogContext';
const IndexScreen = () => {
const { data, addBlogPost, delBlogPost} = useContext(BlogContext);
return (
<View>
<Text>Index Screen</Text>
<Button title = "Add Post" onPress ={addBlogPost}/>
<Button title = "Remove Post" onPress ={delBlogPost}/>
<FlatList
data={data}
keyExtractor={(blogPost) => blogPost.title}
renderItem={({ item }) => {
return <Text>{item.title}</Text>;
}}
/>
</View>
);
};
const styles = StyleSheet.create({});
export default IndexScreen;

Answer 1

The useState hook returns an array of values. The first element is always the value while the second value is always the setter function. State values using useState are immutable and cannot be directly modified, which is why you are given a setter. With this in mind, your addBlogPost and delBlogPost code should look like the following.
const [blogPosts, setBlogPosts] = React.useState([])
// since state is immutable, we can only set the value and not directly modify it
// we use the ... operator to add the current posts and then tack the new one at
// the end.
const addBlogPost = (blogPostToAdd) => setBlogPost([ ...blogPosts, blogPostToAdd])
const delBlogPost = (blogPostToRemove) => {
const blogPostsWithRemoved = blogPosts.filter((blogPost) => {
// you do not have to use id to identify which blog post you are removing,
// but you have to use something to identify the blog post you want to remove
return blogPost.id !== blogPostToRemove.id
})
}
Now when you use these functions, you will want to actually pass the blog post object to them.
<Button onClick={(event) => {
addBlogPost(blogPost)
}}>
Click Me to Add
</Button>