Understanding the concept of arrow functions inheriting the parent context is crucial in React development. Consider this React component example:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
class AlbumList extends Component {
constructor(props) {
super(props);
this.state = {
albums: [],
};
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => {
this.setState({ albums: response.data });
});
}
renderAlbums() {
const { albums } = this.state;
const array = albums.map(album => (
<Text>{album.title}</Text>
));
return array;
}
render() {
return (
<View>
{ this.renderAlbums() }
</View>
);
}
}
export default AlbumList;Surprisingly, the { this.renderAlbums() } function works flawlessly without the need to convert it into an arrow function or use bind. While conventional advice suggests using arrow functions for proper functioning of this, this case proves otherwise. This raises the question - why include arrow functions inside ES6 classes if they work fine without?