I have a page called "Content" where I fetch all the data from an API and put only "name" and "bio" in a cart, in each cart I have a button called "Favourite". When the user clicks the button only cart data (in my case it's "name" and "bio") will store in LocalStorage.
So my first question is how I can store those specific data in local storage?
And in the "Fav-Content" page I want to fetch the local storage data that the user stored by clicking the "Favourite" button.
So my second question is how I can fetch and show those local storage data on another page?
Here is my approach:
import React, { useState, useEffect } from 'react';
import Card from 'react-bootstrap/Card';
const Posts = ({ posts, loading }) => {
const [items, setItems] = useState([]);
const click = () => {
localStorage.setItem('items', JSON.stringify(items));
};
if (loading) {
return <h2>Loading...</h2>;
}
return (
<div className="fav-content">
<ul className="card">
{posts.map((item, index) => {
return (
<li key={index}>
<Card style={{ width: '18rem' }}>
<button onClick={click}>Add Favt</button>
<Card.Body>
<Card.Title>Name: {item.name}</Card.Title>
<Card.Text>Bio: {item.bio}</Card.Text>
</Card.Body>
</Card>
</li>
);
})}
</ul>
</div>
);
};
export default Posts;
I changed your code fragment and added get and set item functions to local storage.
import React, { useState, useEffect } from 'react';
import Card from 'react-bootstrap/Card';
const Posts = ({ posts, loading }) => {
// I dont think you need this state since yo uare not using it in this component
const [items, setItems] = useState([]);
const click = (name) => {
const item = posts.find((post) => post.name === name);
const localStorageItems = JSON.parse(localStorage.getItem('items')) || [].
localStorage.setItem('items', JSON.stringify([...localStorageItems, item]))
};
if (loading) {
return <h2>Loading...</h2>;
}
return (
<div className="fav-content">
<ul className="card">
{posts.map((item, index) => {
return (
<li key={index}>
<Card style={{ width: '18rem' }}>
<button onClick={() => click(item.name)}>Add Favt</button>
<Card.Body>
<Card.Title>Name: {item.name}</Card.Title>
<Card.Text>Bio: {item.bio}</Card.Text>
</Card.Body>
</Card>
</li>
);
})}
</ul>
</div>
);
};
export default Posts;
If you want to use items in annother page you should do localStorage.getItem('items') and parse it.