Im trying to map the list of my expense array elements and after using the map() method Im getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleString')".
I couldn't find the issue please check the code link - https://github.com/mohitdevelops/react-lessons/tree/main/toLocalString-issue
Please help me out, I'm stuck in this error for days.
And checkout the screenshot here 👇
You're using the wrong object keys in your expenseData object in the ExpenseForm component. And so the date will "always" be undefined thus failed during the date conversion in your ExpenseDate component. To fix this, you just need to supply the correct object:
From this:
const expenseData = {
inputValue: enteredValue,
inputAmount: enteredAmount,
inputDate: new Date(enteredDate),
};
To this:
const expenseData = {
id: "e5", // You will need to figure out a way to create a dynamic ID here :)
title: enteredValue,
amount: enteredAmount,
date: new Date(enteredDate),
};
Related
I want to use Multiselect (from multiselect-react-dropdown) component to get multiple values from a user. For this I've written the below code
<Multiselect
options={
allItemsData && allItemsData.map((item) => item.name)
}
onChange={(value) => console.log(value)}
/>
allItemsData is an array of objects in which each object consist of id, name, price, etc. The code just creates an empty number of options in the list that is equal to the size of an array. When I click the on it, or try to select/deselect it just shows the following error:
Cannot read properties of undefined (reading 'toLowerCase')
I just don't know what is undefined here. allItems array is not empty. I'm beginner to React. What is causing this error?
In multiselect react drop down options are expected as an array of object with id and name in it.
check the library documentation in npm or github
{
options: [{name: 'Option 1️⃣', id: 1},{name: 'Option 2️⃣', id: 2}]
};
in your case try this
options={allItemsData && allItemsData.map((item) => {name: item.name, id:item.id})
if you dont have id in your items try adding index or name itself
code image
this is my first question on stackoverflow please help me out. Thanks.
I am trying to simply print out the state property in a div element:
super();
this.state = {
city: "New York"
};
and then i try to print it out in a div element like this:
{this.state.city}
but it gives me the error
Cannot read properties of null (reading 'city')
even though its not null
You are trying to get the state that is defined in the Main component. Move the constructor to the App component.
I have 2 codes.
1.this giving error:
import userdata from "./data.json";
userdata = userdata.userdata;
userdata.map() // do map here.
that giving error:
Uncaught TypeError: Cannot read properties of undefined (reading 'userdata')
this works:
import userdata from "./data.json";
userdata.userdata.map() // do map here.
json:
{"userdata":[{name, job}, {name, job}]}
why the second code is working?
In the first example you import userdata and then try to assign it the value of userdata.userdata.
This isn't possible as you can't assign a new value to an import.
Therefore when you try map over userdata it is still trying to map over userdata from the initial import (and not userdata.userdata).
If you want this to work rather use a new variable name like below:
import userdata from "./data.json";
const userDataArray=userdata.userdata;
userDataArray.map()
In the second example, you reference the array correctly (with userdata.userdata), instead of trying to assign a value to the import.
Building a Weather app in React JS using OpenWeatherMapAPI. What I am trying to do is render dynamic backgrounds based on the response of the API.
The end point for the data I'm looking for is 'data.weather[0].main' and it will show the text 'Clear', 'Cloudy', 'Rain', etc... I will then pass the value through as a prop to my styled component to render the corresponding image. This is where I am getting the error: TypeError: Cannot read properties of undefined (reading '0').
I know this is because it is a nested child in the JSON doc. All the first levels work such as "data.main" or "data.timezone".
I have tried the following and still get the same error:
console.log(data?.weather[0] ? data.weather[0].main : '')
const Weather = ({data}) => {
// Error here
console.log(data?.weather[0] ? data.weather[0].main : '')
return (
// Error here
<StyledContainer bg={data.weather[0].main}>
<Title>Style me</Title>
<Heading>{data.name}</Heading>
</StyledContainer>
)
}
Optional chaining can be used on arrays too...
console.log(data?.weather?.[0].main ?? "")
Hope you're all doing good, I've tried looking around for a specific answer regarding this issue I'm having in ReactJS where I'm trying to map over an array I'm fetching via my local system and I keep getting this error in the console:
TypeError: null is not an object (evaluating 'daysData.map')
Here is a snapshot of my bit of code where I'm initializing the array from fetch:
And here it is in text format:
// Here I initalize the array with useState
const [daysData, setDaysData] = useState(null);
// Here is the port I'm fetching my array from.
useEffect(() => {
fetch('http://localhost:5001/chocolates')
.then((resp) => resp.json())
.then((data) => setDaysData(data));
}, []);
// Console logging is sending back the array with no issues
console.log(daysData);
And here is the map function where I'm trying to render a with the 'id' key from the array:
Here is the bit of code in text format:
{/* Here I'm getting the error " TypeError: null is not an object (evaluating 'daysData.map') " */}
{daysData.map((day) => (
<div>{day.id}</div>
))}
And here is an example of the array where I've fetched data from in which I'm trying to map over:
Thanks for any help in advance
Just set the default state to an empty array instead of null so the Array.prototype.map() works on the initial render before the data is received.
The map() of the empty array won't produce anything in the rendered view
const [daysData, setDaysData] = useState([]);
Your array is null on rendering, and your api fetches after rendering your web app so you need to set it conditionally like this
{daysData !== null? daysData.map((day) => <div>{day.id}</div>:null)}