We Keep Coding

Please how can I get the first child from an array with is code

I have data that has an array that comes from props. Please how can I render the startdate from the first child of the array? I tried this
const { event, match } = props;
const date = event.eventsession[0].startdate

I am not quite sure but i think you can .I have used it in a similar way passing an Icon prop in a component and remember that capitalization matters in jsx to recognise components you made(thats why all functional components are capitalized).You could also look into the render method of react-dom (ReactDom.render())

Angular Sum totals with reduce function

Beginning here, I am attempting to sum a specific property for an array of objects by using the javascript reduce function within angular bindings.
Component
totals: total[] = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];
HTML
<div>{{ totals.map(t => t.itemCount).reduce((a, b) => a + b, 0) }}</div>
With the above, I'm getting the Error: "Bindings cannot contain assignments"
stackblitz mockup
Thanks in advance
EDIT
I have marked the answer provided by #quirimmo as correct but I also wanted to address #jo_va answer.
I felt providing a method for angular inside my component is the right approach #quirimmo, however in my case, the component was JIT compiled on client request and at this time, I'm still uncertain as how to add that method dynamically during that component construction. This lead me to the Expression approach inside my HTML and knowingly avoiding #jo_va's answer of best practice.
My resolution was to pass along a service as an object to the component and place the method within that service for reference.
Thanks for the help S.O.

Define a function inside your component which returns the reduced value and inside the binding call that function of the component:
const totals = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];
console.log(totals.reduce((acc, val) => acc += val.itemCount, 0));

Your reduce function works well. However it's a bad practice to use expressions in angular bindings.
Move your logic to your component and call a method or getter.

Map and reduce return a new array. This is where your error comes from.
You can use a getter like this https://stackblitz.com/edit/angular-whrfxp. Template shouldn't contain calculations.

totals.reduce((a, b) => a += (b. itemCount), 0) works

How to change all states of certain part of child components in reactjs

http://codepen.io/adamchenwei/pen/yagLLZ?editors=0010
I have FormatModule component which is two levels deep from RepeatModule. I want whenever onClick is triggers onClick={this.props.changeFormat.bind(this)} on the FormatModule, it will change all the statues for all the of islamic to islamic: '09999999',, or whichever got passed in from changeFormat function inside the RepeatModule
I heard this is the only way to manipulate state massively when its nested inside a list of components.
For now, when I click on where onClick={this.props.changeFormat is implemented, values are not response to the change. I wonder where is the place I missed link? Since changeFormat is a function that got passed in from the top parent component down to the FormatModule... unless its not the way to do it?
NOTE: I need a solution that not involving Redux or Flux

With a help of colleague, its already fixed in my code pen: http://codepen.io/adamchenwei/pen/yagLLZ?editors=0010
So the issue was that:
I bind(this) in the wrong scope. Should only bind inside the RepeatModule
the newFormat state should follow the format of the original format ( in this case it was an array so newFormat should be an
array as well!
Enjoy!
(Hope whoever voted down my questions come back and learn their stuff before put others down first, especially without any reason)

Ember binding on custom objects

See twiddle here: https://ember-twiddle.com/2150099882893760cef237ff2bd22e85
Basically, in crit-service I create Ember Objects "Crits" and "Crit", and fill them with some data.
The crit-service is used by two different components, which basically do the same thing: display the Crits.
The problem is that the "change" buttons do not work. By debugging, I see that the values are changed, but the view is not updated. Why is this? Since Ember.Object is Observable, shouldn't setting a value notify the template? And most importantly, how can I get this to work?
P.S. I've seen a workaround by using Ember.A() instead of Objects. However, this would add boilerplate, as my data model is really objects and not arrays of key-value pairs.

This seems to be an issue with the {{#each-in}} helper which does not reload on changes. A quick fix is to use the {{get}} helper.
So instead of this:
{{#each-in obj as |key val|}}
{{key}}={{val}}
{{/each-in}}
Do this:
{{#each-in obj as |key|}}
{{key}}={{get obj key}}
{{/each-in}}
However, this will never work if you add additional properties.
here is a working twiddle with that solution.
Another solution that will always work is to call .rerender() on the component. This is save thanks to glimmer, which does only update the parts of the DOM that have changed. However, you would have to call it on your common root component of the two components, or on both components.

String passed to Angular2 Component is always undefined

When I'm passing a string to an #Input() of the Component, it is always undefined.
This is where I loop trough my array and pass the string to the component
https://github.com/davidhoeck/ng2-realtime-chat/blob/master/src/client/app/%2Bmessaging-page/messaging-page.component.html
And thats my component where I'm trying to get the value from the string passed trough.
https://github.com/davidhoeck/ng2-realtime-chat/blob/master/src/client/app/chat-window-component/chat-window-component.component.ts
Would be great if somebody could solve my problem.

The issue is with the way you are sending the string. "default" gets evaluated as a variable, and since it's not present in the controller it will evaluate to undefined.
Instead add use single quotes to denote a string in a template.
<chat-window [groupid]="'default'"></chat-window>
You can see the issue in this small plunker example.