• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

323
Vistas
React - Display all items inside localStorage as a Material UI List

I have localStorage with multiple items on it. I want to retrieve all of them and display it on a <ListItem> Material UI.

Here's my current code:

function saveJob(key, value) {
  localStorage.setItem(key, value);
}

function saveJob is basically just save the value along with unique key. The content of the localStorage would be something like this:

Key Value
1 Technician
2 Plumber

How I retrieved the items back:

var savedJobs = [];
useEffect(() => {
    var keys = Object.keys(localStorage),
        i = keys.length;

    while (i--) {
        savedJobs.push(localStorage.getItem(keys[i]));
    }

    return savedJobs;
}, [])

Now onto the problem, I tried to display it in a functional component through <ListItem> Material UI like the following:

<List>
    {savedJobs.map((job) => (
    <ListItem key={job.Key} disablePadding>
    <ListItemButton>
      <ListItemText  primary={job.Value} />
    </ListItemButton>
  </ListItem>
    ))}
</List>

This is not working. Can anyone point me in the right direction?

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

React doesn't trigger rerender when a local variable in a function component was changed. It will be rerendered when: the state has changed, props were changed or the parent component was rerendered.

You should put your savedJobs to state and write

const [savedJobs, setSavedJobs] = useState([]);

instead of

var savedJobs = [];

almost 3 years ago · Juan Pablo Isaza Denunciar

0

You need state to store the data you retrieve from localstorage. Instead of your savedJobs var outside of your useEffect, create an array inside the hook and then update your state with this data. Here's an example:

  // Initiate your state as an empty array.
  const [savedJobs, setSavedJobs] = useState([]);

  // Used as an example instead of localstorage.
  const example = ["foo", "bar"];

  useEffect(() => {
    let jobs = [];
    let keys = Object.keys(example),
      i = keys.length;
    while (i--) {
      jobs.push(example[i]);
    }
    setSavedJobs(jobs);
  }, [example]);

  return <>{savedJobs.map((job) => job)}</>;

Or see this interactive example.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

First I would check what is inside your savedJobs array. It seems that savedJobs would look like this:

savedJobs = ['Technician', 'Plumber'];

On the other hand, you are mapping and getting the value like so: {job.Key} & {job.Value}

Try:

<List>
    {savedJobs.map((job, i) => (
    <ListItem key={i} disablePadding>
    <ListItemButton>
      <ListItemText  primary={job} />
    </ListItemButton>
  </ListItem>
    ))}
</List>

ps: you should not use i as a key, but I let you figuring out what value you want there.

If you want to use {job.key} and {job.value}, you need to push an object like so:

  
  savedJobs.push({key: i, value: localStorage.getItem(keys[i])});

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda