React Cannot read property '__reactAutoBindMap' of null - javascript

In the render method of one of my React components I have the following code, in which I decide whether or not to render a form.
{ this.state.hideForm == false
? <ListAddition classification={this.props.data} />
: null}
However, I am getting the following error on the second line of the code:
Cannot read property '__reactAutoBindMap' of null
I am certain that the this.props variable has been correctly instantiated. What could be the cause of this?

Related

React Type error cannot read properties of null even though its not null

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.

Type Error 'Can't read properties of undefined' - Accessing API in React

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 ?? "")

How to render props conditionally and checking for undefined, while passing props via React useHistory?

I have component1 where I am redirecting user to other page and passing props like this
onClick={() =>history.push({pathname: "/student/planandprice", state: {plan: history.plan.courseName, as:history.availableSession}})}>Upgrade</Button>
So I want to render it on component2 only when its not undefined, its not undefined when i navigate from component1 to component2 via onclick because history.push(useHistory) method is executed. But I navigate directly to component 2, I get undefined error. I tried to check undefined values using condition:
{props? props.location.state.as : ""}
but its still not working and gives "Cannot read property 'as' of undefined" so how to check undefined values and render it conditionally?

Try using optional chaining: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
{props ? props?.location?.state?.as : ""}

Conditional passing down props to child components in vuejs2

My html code===>
<email-consent inline-template
:submit-queue="saveForLaterMethods">
</email-consent>
I want to pass saveForLaterMethods if it is defined.
I also try with this code
saveForLaterMethods? saveForLaterMethods : undefined
But every time I get this console log error.
Property or method "saveForLaterMethods" is not defined on the
instance but referenced during render. Make sure that this property is
reactive
Is there any way to check undefined in html?

Check if it is defined:
:submit-queue="typeof saveForLaterMethods != 'undefined' ? saveForLaterMethods : undefined"

VueJS Error on sharing data from one component to other

I'm getting some errors in my VueJS application. IMG - http://prntscr.com/exh499
I understand that error exist because country property doesn't exist before I load data from weather JSON, but what is the way to remove this error. Also above [Vue warn]:
This is the GitHub repo, there is a bit more code so I'm not sure if you can read it here.
https://github.com/DenisLapi/weather-app
Also how to look for changes of some property in Component 2 if I edit that property in Component 1 (I'm usign $emit) but when I define property value in Component 2 and then edit that property in Component 1, usign $emit and props[] seems like value is not updated in Component 2
[Vue warn]: Error in render function : (found in <SearchResult> at C:\Users\denis\Desktop\weatherapp\src\components\Result.vue)
TypeError: Cannot read property 'country' of undefined

citydata.foo is undefined, which is fine, but citydata.foo.bar is an error since you're trying to get bar off undefined.
You should wrap everything using citydata with a v-if since it's async.
<div v-if="citydata">
<!-- Now you can use `citydata` safely. -->
</div>

Edited: fiddle with a working example https://jsfiddle.net/wostex/63t082p2/24/
BTW, there is no 'country' property in JSON output: example
You can
set default values for your props: https://v2.vuejs.org/v2/guide/components.html#Prop-Validation
check properties presence before using them in templates (v-if on content blocks)
About reaction on props change: use computed property which depends on prop value, or even watch prop changes: https://v2.vuejs.org/v2/guide/computed.html#Watchers (it depends on your needs)

Categories