0
232
ViewsHow to map array from localStorage to table in reactJS?
I am trying to map array data from localStorage to my react table but the formatting appears like this:
But I would like it to be formatted like this:
The current code I am using is this:
const get = JSON.stringify(localStorage.getItem('pls'));
const setUs = ([get]);
...
function handleSubmit(e){
e.preventDefault();
var js = localStorage.getItem('Data');
var loc = [js];
loc.push(document.getElementById("inputKey").value);
localStorage.setItem("Data", loc);
}
...
return(
<div>
<Table>
<tbody>
{(setUs.map((m,i) => (
<tr key={`${m+i}`}>
<td>{m}</td>
</tr>
)))}
<tbody>
</Table>
</div>
)
...
I am not sure how to format it like the second image. I have tried using spread operators, tring different methods such as JSON.parse() and JSON.stringify() but the array turns into something like [[[,\\input1\]\\input2\\]\input3\\]. Any help would be appreciated.
I am using reactJS and reactstrap.
·
Juan Pablo Isaza
1 answers
Answer question0
You can use hooks for localStorage
const useLocalStorage = (name, defaultValue) => {
const [currentValue, setCurrentValue] = useState(JSON.parse(localStorage.getItem(name)) ?? defaultValue);
const callback = useDelay(delay, currentValue);
useEffect(() => {
localStorage.setItem(name, JSON.stringify(currentValue));
}, [currentValue]);
return [currentValue, setCurrentValue];
}
export default useLocalStorage;
How to use it?
import useLocalStorage from '...';
const Component = () => {
const [pls, setPls] = useLocalStorage('pls', []);
return (
<>
{pls.map(v => (
H E R E
))}
</>
);
};
·
Juan Pablo Isaza
Report
Answer question