How to use local storage in React js

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><a href={`/viewcourse2`} className="btn btn-primary">View</a></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?

VersifiXion · Accepted Answer · 2022-01-27 17:59:11Z

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>

answered Jan 27, 2022 at 17:59

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Batool Nassar Over a year ago

Thank you, it is store the course I select ^_^

Batool Nassar Over a year ago

It is Success, thanks alot

Bunny · Accepted Answer · 2022-01-27 18:01:02Z

1

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)}>

edited Jan 27, 2022 at 18:01

answered Jan 27, 2022 at 17:59

Bunny

66610 silver badges25 bronze badges

2 Comments

VersifiXion Over a year ago

in the handleClickItem function, item doesn't exist no ? So item.CourseID can't be accessed in this scope

Bunny Over a year ago

Oh my bad, lets me edit it back real quick

yusuf_sabri · Accepted Answer · 2022-01-27 18:03:20Z

0

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><a href={`/viewcourse2`} className="btn btn-primary">View</a></td>

            <td><a href={`/editcourse2`} className="btn btn-primary" >
                Edit</a></td>

            <td><button className="btn btn-primary">Delete</button></td>
        </tr>
    })}
</tbody>

answered Jan 27, 2022 at 18:03

yusuf_sabri

1276 bronze badges

Comments

gl-pv · Accepted Answer · 2022-01-27 18:04:49Z

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><a href={`/viewcourse2`} onClick={() => { setClickedCourseId(item.CourseID) }} className="btn btn-primary">View</a></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

Collectives™ on Stack Overflow

How to use local storage in React js

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related