We Keep Coding

Can't pass variable to an element style prop React

<div style={{ width: `${stat.base_stat}px` }} />
Can't get this to work, I ve made sure the property is not undefined but when I try to run thee app i get Cannot read property of null, Occured while linting, any ideas?

You may need to show how the stat variable is being initialized. Consider that for the very first render.
Maybe you are setting the value of stat after the first render.
Review the React Hooks flow (https://github.com/donavon/hook-flow) if you need.

Is it possible to access a value of a variable in a v-for from outside the v-for loop?

So I have a Vue page where I'm looping through a few items and I have the following code:
<div v-if="behavior !== 'selected' && filterItems.length >= 5"></div>
<div v-for="(itemName, index) in filterItems" :key="index">[stuff]</div>
Basically I'm looping through some items from an API, but I also want to conditionally show an element if there's 5 or more of those items, otherwise I want it hidden. That element needs to exist outside the loop, but it needs to check how many items are in the loop.
Interestingly enough, the above code works, but it also throws console errors, presumably because I'm accessing "filterItems" outside of the loop itself.
(here's the console error: [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined")
Any ideas on how I can avoid throwing these errors and accomplish what I need in as vue-native a way as possible?
As requested, here's the code declaring filterItems. It's just a prop declared as an array:
props: {
filterItems: Array,
behavior: String,
},
It's being passed in from a parent component as an array.
UPDATE: A POSSIBLE SOLUTION?
So I don't know if this is the best way to do this or not, but I was able to get the desired result by doing the following. I'd love to hear feedback on if this is a satisfactory solution:
I added a data value:
data() {
return {
displaySearch: false,
};
},
Then added:
updated() {
if (this.behavior !== 'selected' && this.filterItems.length >= 5) {
this.displaySearch = true;
}
},
Then ran a check against the new boolean: v-if="displaySearch"
My thinking is that the check run against displaySearch after the page renders and it avoids the TypeError. I tried mounting it, intially and it broke immediately.
Final Solution
See the answer below from Stephen Thomas. I settled on this as it appears to me to be the simplest and most elegant answer.

presumably because I'm accessing "filterItems" outside of the loop itself.
Nope. filterItems is not defined by the v-for loop. It's defined (or it should be defined) in the component's props object. As such, it's completely accessible anywhere in your template.
TypeError: Cannot read property 'length' of undefined"
That indicates that filterItems isn't defined. The parent that includes this component isn't providing a value. You can define a default (empty) array for the property:
props: {
filterItems: {
type: Array,
default() {
return [];
}
},
behavior: String
}
or you can fix the parent

I think it starts the filterItems as an empty array already solves, for example:
date () {
     return {
         filterItems: []
     }
}

Vue doesn't allow declared properties to be accessed outside v-for (to avoid clashes between properties)
you can declare a global boolean variable to show or hide the component? or inject a property into your objects to hide or show

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)

React Cannot read property '__reactAutoBindMap' of null

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?

Error: undefined is not an object (evaluating 'this.props.menuOptions.map')

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.