How to use local storage in React js - reactjs

Question

This is my code:
function EditCourseTable() {
const [data, setData] = useState([]);
const [CourseID, setCourseID] = useState(0);
useEffect(() => {
Axios
.get("http://localhost:3003/coursestable")
.then(result => setData(result.data));
}, []);
return (
<div className="main">
<h2>
<table className="table" >
<thead className="thead-dark">
<tr>
<th scope="col">Course Number</th>
<th scope="col">Course Name</th>
<th scope="col">View Details</th>
<th scope="col">Edit Course</th>
<th scope="col">Delete Course</th>
</tr>
</thead>
<tbody>
{data.map((item, id) => {
return <tr key={id}>
{localStorage.setItem('CourseID', item.CourseID)}
<td>{item.CourseID}</td>
<td>{item.Name}</td>
<td>View</td>
<td><a href={`/editcourse2`} className="btn btn-primary" >
Edit</a></td>
<td><button className="btn btn-primary">Delete</button></td>
</tr>
})}
</tbody>
</table>
</h2>
</div>
)
}
export default EditCourseTable;
I use the localStorage to store the CourseId that the user click on (when click in Edit or View), but it is store the last courseID in the table, not the courseID that I click on. Whats the error?

Answer 1

You should insert the value in the localStorage by triggering a function called on click of an element
function storeCourse(id) {
localStorage.setItem('CourseID', id)
}
<td>
<span
className="btn btn-primary"
onClick={() => storeCourse(item.CourseID)}>
View
</span>
</td>

Answer 2

You need to create something to catch that click, so you can create some function like
const handleClickItem = (courseID) => {
localStorage.setItem('CourseID', courseID)
}
So whenever the user click, it will use onClick, so you can pass something like onClick = { () => handleClickItem(item.CourseID)} then pass the item.CourseID into that handleClickItem
Now the handleClickItem has the courseID
That's when you localStorage.setItem('CourseID', item.CourseID)
function EditCourseTable() {
const [data, setData] = useState([]);
const [CourseID, setCourseID] = useState(0);
useEffect(() => {
Axios
.get("http://localhost:3003/coursestable")
.then(result => setData(result.data));
}, []);
//- Add handleClickItem
const handleClickItem = (courseID) => {
localStorage.setItem('CourseID', courseID)
}
return
Inside the return, the map one, just add onClick where ever you want the user to click
for example:
<tr key={id} onClick = {() => handleClickItem(item.CourseID)}>

Answer 3

Your localStorage code runs when rendered so the last rendered item's id is saved to localStorage. You should use the function onClick.
<tbody>
{data.map((item, id) => {
return <tr key={id} onClick={() => localStorage.setItem('CourseID', item.CourseID)}>
<td>{item.CourseID}</td>
<td>{item.Name}</td>
<td>View</td>
<td><a href={`/editcourse2`} className="btn btn-primary" >
Edit</a></td>
<td><button className="btn btn-primary">Delete</button></td>
</tr>
})}
</tbody>

Answer 4

In your code you save data to local storage on items render. All items saves to local storage on key CourseID in render order.
Because of this after items render local storage CourseID value equal last item in rendered collection.
Right chose for solving this problem is saving data to local storage on link click.
But i think you does not need saving this data to local storage. React allow storing this in state.
Example for your code:
const [clickedCourseId, setClickedCourseId] = useState(null);
...
render (
...
{data.map((item, id) => {
return (
<tr key={id}>
<td>{item.CourseID}</td>
<td>{item.Name}</td>
<td>View</td>
<td><a href={`/editcourse2`} onClick={() => { setClickedCourseId(item.CourseID) }} className="btn btn-primary" >
Edit</a></td>
<td><button className="btn btn-primary">Delete</button></td>
</tr>
)
})}
In this example, when you click on View or Edit links, clickedCourseId being filled clicked item CourseId and you does not need to store it in localStorage.
However, if you want to store it in localStorage, you can change setClickedCourseId to your localStorage setItem