How to store multiple set of data in local storage in reactjs?

Question

I have a page called " Post.js" where I want to click the " Add Favt" button and save the data into local storage. But in every new click, the data is replaced by the previous one instead of adding new data.

Here is "Post.js" :

const Posts = ({ posts, loading }) => {
    const click = (id, name, bio, link) => {
        //setButtonText(text);
        const obj = {
            id: id,
            name: name,
            bio: bio,
            link: link,
        };
        localStorage.setItem('items', JSON.stringify({ ...obj }));
    };

    if (loading) {
        return <h2>Loading...</h2>;
    }
    return (
        <div className="fav-content">
            <ul className="card">
                {posts.map((item, index) => {
                    console.log(item._id);
                    return (
                        <li key={item._id}>
                            <button
                                onClick={() => click(item._id, item.name, item.bio, item.link)}
                            >
                                Add Favt
                            </button>
                            <Card style={{ width: '18rem' }}>
                                <Card.Body>
                                    <Card.Title>Name: {item.name}</Card.Title>
                                    <Card.Text>Bio: {item.bio}</Card.Text>
                                    <Card.Text>Link: {item.link}</Card.Text>
                                </Card.Body>
                            </Card>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

And I want to fetch those saved data from local storage into "Favauth" file .

Here is "Favauth.js" :

function FavAuthor() {
    const [data, setItems] = useState([]);
    useEffect(() => {
        const localStorageItems = JSON.parse(localStorage.getItem('items'));
        console.log(localStorageItems);
        if (localStorageItems) {
            setItems(localStorageItems);
        }
    }, []);
    return (
        <>
            <div className="fav-content">
                <ul className="card">
                    <li key={data.id}>
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Name: {data.name}</Card.Title>
                                <Card.Text>Bio: {data.bio}</Card.Text>
                                <Card.Text>Link: {data.link}</Card.Text>
                            </Card.Body>
                        </Card>
                    </li>
                </ul>
            </div>
        </>
    );
}

Answer 1

You are replacing the data instead of appending it to the existing ones. You should retrieve the old data first. Then merge both the new and old data before saving it in localStorage in posts.js .

let oldData = JSON.parse(localStorage.getItem('items'))
localStorage.setItem('items', JSON.stringify([ ...oldData, ...obj ]));

Then in FavAuth.js , you should loop through the items in localStorage .

...
{data.map(post => (
    <li key={post.id}>
       <Card style={{ width: '18rem' }}>                            
         <Card.Body>
                                    
            <Card.Title>Name: {post.name}</Card.Title>
                                    
            <Card.Text>Bio: {post.bio}</Card.Text>                               
            <Card.Text>Link: {post.link}</Card.Text>
                                
         </Card.Body>
       </Card>
 </li>
))
}
...

Answer 2

It's a problem about rendering. Try this hook in order to render the newest localStorage data instead of the previous one: https://usehooks.com/useLocalStorage/