import React, { useState, useEffect } from 'react';
import {
FormControl,
Form,
Button,
Container,
Card,
Row,
Col,
} from 'react-bootstrap';
import { nanoid } from 'nanoid';
import axios from 'axios';
import * as usertz from 'user-timezone';
import './card.css';
import slp from '../assets/SLP.png';
import ronin from '../assets/ronin.png';
const AxieAPI = () => {
const [toggle, setToggle] = useState(false);
// Declare state variables
// Code removed for brevity
useEffect(() => {
// Fetch data from API and local storage
// Code removed for brevity
}, [dataAll]);
// Event handler to onChange event
// Code removed for brevity
// Event handler to onSubmit event
// Code removed for brevity
return (
<div>
<Container className="p-4">
<Button onClick={() => setToggle(!toggle)} className="mb-5">
Add Scholar
</Button>
{toggle && (
<Form onSubmit={onSubmitHandler}>
<Row className="mb-3">
// Form fields for input
</Row>
<div className="d-grid gap-2 pt-3">
<Button type="submit" size="lg">
Add User
</Button>
</div>
</Form>
)}
<Container>
<Row>
{dataAll.slice(2).map((singleData) => {
// Mapping each user data
})}
</Row>
</Container>
</Container>
</div>
);
};
export default AxieAPI;
The first time I took on the challenge of coding localStorage, but it seems like my code is upside down. Can someone help correct this? The array mapping seems off because I'm getting an error that says "Cannot read properties of null."
I encountered another problem where when I run npm start, it does not record the initial data into the State, resulting in null which leads to the error in array mapping.
I have been trying to tweak the localStorage save data and retrieve it, but every time I refresh, the data seems to get wiped out. I believe there might be a code error in the useEffect and Submit functions for storing the data, and every time I have to save empty data into the localStorage to prevent the error in mapping the array.