CODEWITHSUNDEEP
reactjs
Batool Nassar
Batool Nassar

Reputation: 53

How to use local storage in React js

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?

Upvotes: 0

Views: 1603

Answers (4)

gl-pv
gl-pv

Reputation: 46

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

Upvotes: 0

yusuf_sabri
yusuf_sabri

Reputation: 129

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>

Upvotes: 0

Bunny
Bunny

Reputation: 646

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

Upvotes: 1

VersifiXion
VersifiXion

Reputation: 2292

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>

Upvotes: 1

Related Questions