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.
Related
A TypeError: Cannot read property 'value' of null for this function" keeps appearing and I'm not sure where the problem comes from. Can anyone do the favor of showing how to resolve this issue? This is reactjs btw
import React from 'react';
function Electricity_Daily(){
var energyKwh = document.getElementById('Your energy used up in Kwh').value;
var electricityDaily = parseInt(energyKwh) * .92;
document.getElementById('co2 Emmissions Daily').value = electricityDaily;
};
var ReactDOM = require('react-dom');
ReactDOM.render(<Electricity_Daily />, document.getElementById('root'));
Your problem is trying to access the value property of something that doesn't exist ( null). You do this at document.getElementById('Your energy used up in Kwh').value. Simply put, the ElementId is not fond; The same thing is true two lines down (probably).
Simply put, we need more code to solve this (where you declare those IDs).
Hi guys i am new to react js and It keeps on saying TypeError: Cannot read property 'map' of undefined in react.js, even tho its not undefined.
//my variables
const [musics, setMusics] = useState()
const [user, setUser] = useState(null)
const [pfp, setPfp] = useState(null)
const { params: { uID } } = match;
var userName;
var musicArray = [];
//use effect so it does not infinite loop
useEffect(()=>{ firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
var music = snapshot.val()
//gets title of each songs
Object.values(music).forEach((value)=>{
musicArray.push(value.title)//pushes value to array
setMusics(musicArray)//sets that array to musics
})
})
}, [])
return(
.....
<div class = "music-content-container">
<div class = "music-box">
<div class = "user-musics">
<ul>
//says TypeError: Cannot read property 'map' of undefined even tho its defined
{musics.map((name)=>{
return <li>{name}</li>
})}
</ul>
</div>
</div>
</div>
</div>
.....
)
how do I fix this issue? is there any way to fix this?
The initial value of musics state is undefined. You should give initial value like this.
const [musics, setMusics] = useState([])
It's because when you define the state using useState for musics, you don't specify an initial value. Therefore, ReactJS doesn't know what type musics is.
The good practice is to always provide an initial state when using useState. In your case, it would be simply providing an empty array.
const [musics, setMusics] = useState([])
I would even go further and rename the musics to something like tracks as this is more readable.
As a further refactoring in your code, I'd avoid using var and instead define variables with either const if it's not going to be changed or let if you expect to re-assign it.
I also noticed that in your useEffect you don't provide values for the dependency array for musicArray and uID as these are declared outside of useEffect. To avoid unnecessary re-renders, always provide external values in the dependency array. This way, the useEffect will be triggered when the values in the dependency array change.
useEffect(() => {
...
}, [musicArray, uID]);
Also, when using React, instead of class in your JSX use className as that's what React uses to map it to HTML class attribute. It's just one of React things that you need to remember.
So in your JSX you would write something like this
<div className="music-content-container">
...
</div>
It is null when the component first renders until the useEffect sets the data. I would initialize it to an empty array in useState.
I fetched some data from the server, and tried to use in the react element, but i keep getting the type error of reading property from undefined.
import React, { useEffect, useState } from 'react';
import httpService from 'services/httpService';
function PageHighlight() {
const [highlightItem,sethighlightItem]=useState({});
async function fetchHighlightItem() {
const {data}=await httpService.get('/PageHighlights');
sethighlightItem(data)
}
useEffect(()=>{ fetchHighlightItem() },[]);
console.log(highlightItem.NYCity)
const item={...highlightItem["NYCity"]};
the result of console.log(highlightItem.NYCity) has already that it is a valid object:
result of console.log show that is an object
but when i tried to assign it to a variable and access it:const item=highlightItem["NYCity"]; it return an type error of reading property from undefined.
error ocurrs
if I cloned it to the variable:const item={...highlightItem["NYCity"]};, everything works, i can access to the property now. why? thank you.
I'm trying to create my first angular/rxjs app and can't figure out why I'm getting this error:
TypeError: Cannot read property 'students' of undefined
I was trying to follow tutorial but I didn't copy it word by word.
I'm totally new to this.
https://dpaste.de/F415#L1,30,98,131
in your init function you have the following:
this.students$ = this.store.select(fromStore.getAllStudents);
now, this getAllStudents states as follow:
export const getAllStudents = createSelector(getStudentState, fromStudents.getStudents);
which means we are going to get something from getStudentState first, pass it to the fromStudents.getStudents, and return its returned value.
Let's see what the getStudendState function does:
export const getStudentState = createSelector(getState, (state: StudentsState) => state.students);
ok, again we take the state from the getState function and return the students property, let's analyze this getState:
export const getState = createFeatureSelector<StudentsState>('student-list');
Everything is clear now, we get the student-list property and we can travel back to our chain... unless...
export interface StudentsState {
students: fromStudents.StudentState;
}
as expected, when we get the student-list property from our state, it returns undefined since doesn't exist, and at that point, the getState will try to access state.students which will lead to the error you get.
Using Angular, React and ReactNG, I get this error:
Error: undefined is not an object (evaluating 'this.props.menuOptions.map')
Here is the code:
http://jsbin.com/xuranipuza/1/edit?html,js,output
It seems like you are missing providing the attributes in your react directive element with respect to the propTypes that you are passing in. Because it then places a watch on these attribute values (reflecting the scope property name) and populate the props accordingly.
So:
<sidebar-button menu-options="menuOptions" button-image="buttonImage"
button-image-mini="buttonImageMini" menu-option-bottom="menuOptionBottom">
</sidebar-button>
Bin
Doc Says:
The reactDirective service will read the React component propTypes and watch attributes with these names. If your react component doesn't have propTypes defined you can pass in an array of attribute names to watch. By default, attributes will be watched by value however you can also choose to watch by reference or collection by supplying the watch-depth attribute. Possible values are reference, collection and value (default).
Disclaimer: I have not used ng-react before.