We Keep Coding

Acessing properties of an object in an array in React

So I've been trying to figure this one out for a while and I'm really hoping someone would be able to help
I'm creating an array and storing a list of objects in it like this.
const heroPost = postList.filter(post => post.hero);
when I console log heroPost I get the following result.
I'm trying to access the url property in this object as follows.
console.log(heroPost[0].url);
But I keep getting this undefined error.
I'm not really sure what's going wrong here. I am using an async function to get data from a database which I'm guessing might be a problem but I'm outputting data from the 'postList' in jsx which I've used to retrieve data into the 'heroPost' so I'm uncertain how it can be the problem. Any help or ideas would be greatly appreciated.
Thank you!
Edit:
This is the portion of the component that uses the 'postList' to render data. Which works fine.
<div className="posts-container">
{postList.map((post) => (
<div key={post.id} className="post">
<h3 className="post-title">{post.title}</h3>
<div className="post-info">
<p className="author">{post.author}</p>
<p className="timestamp">{post.author}</p>
</div>
<p className="content">{post.body}</p>
<img src={post.url} alt="" />
</div>
))}
</div>
What I'm trying to do now is to use the heroPost to render data into the hero section of the page as follows but it is still throwing the undefined error.
<div className="hero">
<img src={heroPost[0].url} alt="" />
</div>
Thank you for all the comments and answers, I understand the problem now. Still don't really get why it works in the 'postList' instance and not here. Is there a way I can do this without directly trying to go to the file where I retrieve the data and add it into that function?

Since you are using an async function to get the data, when the component that consists this code, renders for the first time, it will not have the data it needs to render the component.
Hence 'undefined'
You can resolve this issue by conditionally rendering the component. That is, render the component only after the data is available.
Since you haven't shared the component code, you can refer this react doc to help with the issue : Conditional Rendering
Edit: following is how the condition would work. This is assuming postList is a state variable and a re-render will be triggered when it's value is changed:
For the second snippet you shared:
<div className="hero">
{(heroPost && heroPost[0])?<img src={heroPost[0].url} alt="" />:'No data'}
</div>

Simple answer: you get those error because it's undefined
If you look at you console.log you can see an empty array at the first line
That's because when you first render your component postList is an empty array.
Only after you fetch your data and populate you array you can access it
you can try to do this
useEffect(() => {
setHeroPost(postList.find(p => p.hero))
}, [postList])

initialize state react, to solve undefined when the page first rendered

I want to map a state, but that state (the name of the state is "task", it is the child of parent state called "timesheet", the "timesheet" state is already defined using componentWillMount) is still undefined UNTIL an action creator has been triggered (click a button) inside my page. But, i already define timesheet.task.map inside jsx, and thus the page cannot load and it shows an error "cannot read property map of undefined".
code
So as you can see here, i want to map a list of 'select' options from a state which is called when an event is triggered (it is still undefined when the page renders), but the page will not load because the timesheet.task is still undefined when the page load the first time
Do you have any idea how to fix this? I was thinking to initialize the state, but i don't know how to do it.Thank you very much!

Very common situation. At the top of your render() - just add a conditional to check if that value is valid or not.. something like:
if (!this.state.timesheet.task) {
return <p> waiting for my value </p> // add any generic component to here that would await your value
}
Depending on your page layout, you might want to just create a small component to inject as a conditional as you await your value to be populated.

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 - How can I wrap and element depending on a boolean parameter?

I'm using react-bootstrap tooltip to build a react component. According to react-boostrap specifications, I need to wrap my element with an OverlayTrigger element, like this:
<OverlayTrigger overlay={this.getTooltipElement()} placement='left'>
//element
</OverlayTrigger>
This works just fine, but my component requires to show the tooltip when hovered (usual behavior) AND only if a boolean variable is set to true. I've tried this:
if (booleanParameter) {
return (<OverlayTrigger overlay={this.getTooltipElement()} placement='left'>
{myElementVariable};
</OverlayTrigger>)
} else {
return myElementVariable;
}
But when the tooltip is instructed to show (by the boolean parameter), I get the following warning:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
Important: getTooltipElement() uses component state fields.
... and the component starts to act erratically. How should I go to solve my problem? How can I wrap and element depending on a boolean parameter? Is there another, less elaborated solution?

I believe the approach you are using is fine, the warning essentially tells you that somewhere - possibly in whatever getTooltipElement() returns, you're calling setState after the component unmounted. You fix this by checking whether the component is still mounted before you set the state:
if(this.isMounted())
this.setState({...});
By the way, if you give your components a 'displayName' attribute, the warning will actually tell you in which component it happened, making it easier to find.

Cannot assign to read only property 'props' of #<Object> in react native

Cannot assign to read only property 'props' of #
I checked #1654 with no success. Please have a look at the issue in more detail here-
Basically what I am doing is using a Navigator to move from index page to ApplistGridView page.
I see the navigation is successful(from logs) but, even before I see the screen I face this issue.
And chrome debug messages-
Code is posted at Github
Haven't found a solution.
What am I doing wrong?

You cannot push to props this.props.nav.push({id: 'Applist', index: 2}); since component properties are read-only, as the error states. Props can only be derived from a parent component, but cannot be modified.
EDIT: This article is a great starting point for people confused in this matter as I was a while ago:)
https://reactjs.org/docs/thinking-in-react.html

If this is happening to you not because of props but because of state, you may be trying to do an assignment like this:
this.state.nav = 'whatever';
Remember that assignments to state in React should be like:
this.setState({
nav: 'whatever'
});

You write this.props.nav.push({id: 'Applist', index: 2});
But this.props is read-only; you cannot modify it.
If you want to pass some value to the parent react component, then you can use this.prop.onSomeEvent(value) in a child component. Then handle the push process in the parent component.

In file node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js
change
ts.JsxEmit.ReactJsx
to
ts.JsxEmit.ReactJSX

Just One thing:
npm install typescript#4.0.5
Restart the server