I am new to React and if I try to get access to openm2() using this.openm2() in openm method then I got error
"Cannot read property 'openm2' of undefined"
class Car extends React.Component {
openm2() {
return "Hello from openm2";
}
openm(e) {
e.preventDefault();
this.openm2(); Here I get error
}
render() {
return (
<div>
<h1>
{this.props.type.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</h1>
<form onSubmit={this.openm}>
<input type="text" name="type" />
<button>Remo all</button>
</form>
</div>
);
}
}
Change your openm function to arrow function, which binds this to function automatically.
openm = (e) => {
e.preventDefault();
this.openm2(); Here I get error
}
Or, you can bind this like,
<form onSubmit={this.openm.bind(this)}>
Or, you can bind this in constructor
constructor(props){
super(props);
this.openm = this.openm.bind(this)
}
You need to bind the current this reference, so you can use the arrow function for this. please check below code
class Car extends React.Component {
openm2 = () => {
return "Hello from openm2";
}
openm = (e) => {
e.preventDefault();
this.openm2();
}
render() {
return (
<div>
<h1>
{this.props.type.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</h1>
<form onSubmit={this.openm}>
<input type="text" name="type" />
<button>Remo all</button>
</form>
</div>
);
}
}
Related
I have a this value inside an if statement, nested inside a my handleFormChange function. I've tried to use arrow functions with this function to bind the value of this but im getting the following error message:
TypeError: Cannot set property 'author' of undefined
From my understanding usually you find the this value by looking at where the function containing this is called. However, in my case im struggling to work this out. Can anyone explain to me why it is undefined and how to solve this issue? Here is the code:
class CommentForm extends React.Component{
constructor(props){
super(props)
var comment={author:'', message:''}
}
handleSubmit= (e)=>{
e.preventDefault()
var authorVal = this.comment.author;
var textVal = this.comment.message;
//this stops any comment submittal if anything missing
if (!textVal || !authorVal) {
return;
}
this.props.onCommentSubmit(this.comment);
//reset form values
e.target[0].value = '';
e.target[1].value = '';
return;
}
handleFormChange= (e)=>{
e.preventDefault()
if(e.target.name==='author'){
var author = e.target.value.trim();
this.comment.author = author
}else if(e.target.name==='message'){
var message = e.target.value.trim();
this.comment.message = message
}
}
render() {
return (
<form className = "ui form" method="post" onChange={(e)=>{this.handleFormChange(e)}} onSubmit={(e)=>{this.handleSubmit(e)}}>
<div className="form-group">
<input
className="form-control"
placeholder="user..."
name="author"
type="text"
/>
</div>
<div className="form-group">
<textarea
className="form-control"
placeholder="comment..."
name="message"
/>
</div>
<div className="form-group">
<button disabled={null} className="btn btn-primary">
Comment ➤
</button>
</div>
</form>
);
}
}
export default CommentForm
The first step into learning how to do what you want is to study how React's State works (official docs are great at explaning it).
This example is not complete, but should guide you through the proccess.
class CommentForm extends Component {
constructor(props) {
super(props);
this.state = {
author : '',
message : '',
}
this.onChangeAuthorName = this.onChangeAuthorName.bind(this);
this.onBlurAuthorName = this.onBlurAuthorName.bind(this);
}
onChangeAuthorName(e) {
this.setState({ author: e.target.value });
}
onBlurAuthorName() {
// trim on blur (or when you send to the network, to avoid
// having the user not being able to add empty whitespaces
// while typing
this.setState({ author: this.state.author.trim() })
}
render() {
return (
...
<input value={this.state.author} onChange={this.onChangeAuthorName} onBlur={this.onBlurAuthorName} />
...
);
}
}
Usually, when you want to "set" variables in React, you don't add them as you do to in Javascript classes (this.comment = e.target.value), but instead, use the function setState(). From the docs:
// Wrong
this.state.comment = 'Hello';
Instead, use setState():
// Correct
this.setState({comment: 'Hello'});
(NOTE: Alternatively, this could be done using React Hooks, but I recommend you learn the lifecycle methods firsthand. Good luck!)
I decided to write even if you proposed the correct answer for the simple reason that I think my code is closer to what it published.
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
constructor(props) {
super(props);
this.state = {
comment: {},
some: 1
};
}
handleFormChange = e => {
e.preventDefault();
let { comment } = this.state;
const newCommentState = function() {
let returnObj = { ...comment };
returnObj[this.target.name] = this.target.value.trim();
return returnObj;
}.bind(e)();
this.setState({ comment: newCommentState });
};
handleSubmit = e => {
e.preventDefault();
let { comment } = this.state;
if (!comment.author || !comment.message) return;
this.props.onCommentSubmit(comment);
this.setState({ comment: {} });
e.target[0].value = "";
e.target[1].value = "";
};
render() {
return (
<div>
<form
className="ui form"
method="post"
onChange={e => {
this.handleFormChange(e);
}}
onSubmit={e => {
this.handleSubmit(e);
}}
>
<div className="form-group">
<input
className="form-control"
placeholder="user..."
name="author"
type="text"
/>
</div>
<div className="form-group">
<textarea
className="form-control"
placeholder="comment..."
name="message"
/>
</div>
<div className="form-group">
<button disabled={null} className="btn btn-primary">
Comment ➤
</button>
</div>
</form>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Live example:
I have a little app that has an input and based on the search value, displays weather for a particular city. I'm stuck at a certain point though. The idea is that once you search a city, it hides the text input and search button and displays some weather info and another search button to search a new city. My issue is that I want to focus on the search box once I click to search again. I hope that makes sense. I read that the ideal way to do this is with refs. I wired it up like such:
class WeatherForm extends React.Component {
constructor(props) {
super(props);
this.city = React.createRef();
}
componentDidMount() {
this.props.passRefUpward(this.city);
this.city.current.focus();
}
render() {
if (this.props.isOpen) {
return (
<div className={style.weatherForm}>
<form action='/' method='GET'>
<input
ref={this.city}
onChange={this.props.updateInputValue}
type='text'
placeholder='Search city'
/>
<input
onClick={e => this.props.getWeather(e)}
type='submit'
value='Search'
/>
</form>
</div>
)
} else {
return (
<div className={style.resetButton}>
<p>Seach another city?</p>
<button
onClick={this.props.resetSearch}>Search
</button>
</div>
);
}
}
}
With this I can pass that ref up to the parent to use in my search by using this.state.myRefs.current.value; It works great, but when I try to reference this.state.myRefs.current in a different function to use .focus(), it returns null.
resetSearch = () => {
console.log(this.state.myRefs.current); // <- returns null
this.setState({
isOpen: !this.state.isOpen,
details: [],
video: []
});
}
Is this because I'm hiding and showing different components based on the search click? I've read numerous posts on SO, but I still can't crack this. Any help is appreciated. I'll include the full code below. To see it in full here is the git repo: https://github.com/DanDeller/tinyWeather/blob/master/src/components/WeatherMain.js
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
recentCities: [],
details: [],
isOpen: true,
myRefs: '',
video: '',
city: ''
};
this.updateInputValue = this.updateInputValue.bind(this);
this.getRefsFromChild = this.getRefsFromChild.bind(this);
this.resetSearch = this.resetSearch.bind(this);
this.getWeather = this.getWeather.bind(this);
}
updateInputValue = (e) => {
...
}
resetSearch = () => {
console.log(this.state.myRefs.current);
this.setState({
isOpen: !this.state.isOpen,
details: [],
video: []
});
}
getWeather = (e) => {
...
}
getRefsFromChild = (childRefs) => {
...
}
render() {
return (
<section className={style.container}>
<div className={style.weatherMain + ' ' + style.bodyText}>
<video key={this.state.video} className={style.video} loop autoPlay muted>
<source src={this.state.video} type="video/mp4">
</source>
Your browser does not support the video tag.
</video>
<div className={style.hold}>
<div className={style.weatherLeft}>
<WeatherForm
updateInputValue={this.updateInputValue}
getWeather={this.getWeather}
passRefUpward={this.getRefsFromChild}
resetSearch={this.resetSearch}
isOpen={this.state.isOpen}
/>
<WeatherList
details={this.state.details}
city={this.state.city}
isOpen={this.state.isOpen}
/>
</div>
<div className={style.weatherRight}>
<Sidebar
recentCities={this.state.recentCities}
/>
</div>
<div className={style.clear}></div>
</div>
</div>
</section>
);
}
}
class WeatherForm extends React.Component {
constructor(props) {
super(props);
this.city = React.createRef();
}
componentDidMount() {
this.props.passRefUpward(this.city);
this.city.current.focus();
}
render() {
if (this.props.isOpen) {
return (
<div className={style.weatherForm}>
<form action='/' method='GET'>
<input
ref={this.city}
onChange={this.props.updateInputValue}
type='text'
placeholder='Search city'
/>
<input
onClick={e => this.props.getWeather(e)}
type='submit'
value='Search'
/>
</form>
</div>
)
} else {
return (
<div className={style.resetButton}>
<p>Seach another city?</p>
<button
onClick={this.props.resetSearch}>Search
</button>
</div>
);
}
}
}
export default Weather;
You try to achieve unmounted component from DOM, because of this you can not catch the reference. If you put this code your instead of render function of WeatherForm component, you can catch the reference. Because i just hide it, not remove from DOM.
render() {
return (
<div>
<div className={style.weatherForm}
style={this.props.isOpen ? {visibility:"initial"} :{visibility:"hidden"}}>
<form action='/' method='GET'>
<input
ref={this.city}
onChange={this.props.updateInputValue}
type='text'
placeholder='Search city'
/>
<input
onClick={e => this.props.getWeather(e)}
type='submit'
value='Search'
/>
</form>
</div>
<div className={style.resetButton} style={this.props.isOpen ? {visibility:"hidden"} :{visibility:"initial"}}>
<p>Seach another city?</p>
<button
onClick={this.props.resetSearch}>Search
</button>
</div>
</div>
)
}
console.log(this.state.myRefs.current) returns null , because it's a reference to an input dom element which does not exists as currently Weather form is displaying Search another city along with a reset button.
In reset function state changes, which results in change of prop isOpen for WeatherForm component. Now, screen would be displaying the input field along with search button.
After component is updated ComponentDidUpdate lifecycle method is called.
Please add ComponentDidUpdate lifecycle method in WeatherForm and add ,
this.city.current.focus() in the body of method.
There is no need to pass reference of a dom element to the parent element as it is not consider as a good practise.
Edit 1 :-
Need to set input field in focus only if prop ( isOpen ) is true as we will get reference to the input field only if its mounted.
ComponentDidUpdate(){
if(this props.isOpen)
this.city.current.focus
}
Link to Lifecycle method :-
https://reactjs.org/docs/react-component.html#componentdidupdate
Hope this helps,
Cheers !!
I am stuck between this here. I want to loop and check if the props index and map index match then to change value
But then if I do the following it throws an syntax error pointing at if Please let me know whats going wrong this is going beyond
import React, {Component} from 'react';
update.js
class UpdateItem extends Component{
constructor(props){
super(props);
this.state={editedVal:''};
//this.setState({editedVal:this.props.eVal});
this.handleSubmit=this.handleSubmit.bind(this);
this.handleChange=this.handleChange.bind(this);
}
handleChange(e)
{this.setState({
editedVal:e.target.value
});
//this.props.eVal=e.target.value;
}
handleSubmit(e){
e.preventDefault();
alert( this.state.editedVal);
alert(this.props.eIndx);
this.props.list.map((item,i)=>{if(this.props.eIndx===i)
{alert("s")}else{alert("sd")}});
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.editedVal?this.state.editedVal:this.props.eVal} onChange={this.handleChange}/>
<input type="submit" value="update"/>
</form>
</div>
);
}
}
export default UpdateItem;
addlist.js
class AdList extends Component{
constructor(props){
super(props);
this.state={value:'',disArrList:[],editVal:'',editIndx:''}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
this.delItemRow=this.delItemRow.bind(this);
this.updateItemRow=this.updateItemRow.bind(this);
this.editItemValue=this.editItemValue.bind(this);
}
editItemValue(e)
{
alert("edit");
}
delItemRow(itemName)
{this.setState({disArrList:this.state.disArrList.filter(e1=>e1!==itemName)})
;
}
updateItemRow(itemName,itemId)
{
this.setState({editVal:itemName,editIndx:itemId});
alert(itemId +"==========="+itemName);
}
handleChange(e){
this.setState({value:e.target.value});
}
handleSubmit(e){
e.preventDefault();
//alert("submit"+this.state.value);
let mycolletion=this.state.disArrList.concat(this.state.value);
this.setState({disArrList:mycolletion});
}
render(){
return(
<div>
<div className="Todo">
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
<input type="submit" value="Add" />
</form>
</div>
<div>
<DisplayList list={this.state.disArrList} removeItem={this.delItemRow} updateItem={this.updateItemRow}/>
</div>
<div>
<UpdateItem list={this.state.disArrList} editItem={this.editItemValue} eVal={this.state.editVal} eIndx={this.state.editIndx}/>
</div>
</div>
);
}
}
export default AdList;
ifs are statements, not expressions. You'll have to use a braced arrow function to use if.
this.props.list.map((item, i) => {
if (this.props.eIndx === i) {
alert("s");
} else {
alert("sd");
}
// map should always return something,
// or you'll end up with a list of `undefined`s.
//Otherwise use `forEach`.
return 'something';
});
Use .forEachinstance of Map function, .map function returns in result as array , and .forEach just looping.
For example:
this.props.list.forEach((item, i) => {
if (//your logic) {
// to do
} else {
//stuff
}
});
If You want get Array in result use .map and You need to return something on each loop:
this.props.list.map((item, i) => {
if (//your logic) {
return // to do;
} else {
return //stuff;
}
});
You can also use filter if you have only one condition and it will also return array.
this.props.list.filter((item, i) => this.props.eindex === i ? "do something" : "else dont")
worked like charm use splice method
this.props.list.splice(checkIndex,1,this.state.editedVal);
So, I wish to call a function using an onClick event and pass it some parameters from the event, but am receiving the above mentioned error message.
What am I overlooking here?
My code is as follows:
class Comments extends React.Component {
constructor(props) {
super(props);
this.removeCommentMutation = this.removeCommentMutation.bind(this);
}
removeCommentMutation (postID, commentID) {
....
}
handleSubmitError (err) {
console.error(err.message);
}
renderComment (comments) {
return (
<div className="comment" key={comments.id}>
<p>
<strong>{comments.user}</strong>
{comments.text}
<button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>×</button>
</p>
</div>
);
}
handleSubmit (e) {
e.preventDefault();
this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
this.refs.commentForm.reset();
this.refs.author.focus();
}
render () {
const comments = this.props.post.comments || [];
const currentPosts = comments.map(this.renderComment);
return (
<div className="comments">
{currentPosts}
<form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
<input type="text" ref="author" placeholder="author"/>
<input type="text" ref="comment" placeholder="comment"/>
<input type="submit" hidden/>
</form>
</div>
);
}
};
}
The full error is:
Comments.js:189 Uncaught TypeError: Cannot read property 'removeCommentMutation' of undefined
at onClick (http://localhost:7770/static/bundle.js:36072:30)
at HTMLUnknownElement.wrapped (http://localhost:7770/static/bundle.js:63526:29)
at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:7770/static/bundle.js:43148:16)
at executeDispatch (http://localhost:7770/static/bundle.js:70629:21)
at Object.executeDispatchesInOrder (http://localhost:7770/static/bundle.js:70652:5)
at executeDispatchesAndRelease (http://localhost:7770/static/bundle.js:7436:22)
at executeDispatchesAndReleaseTopLevel (http://localhost:7770/static/bundle.js:7447:10)
at Array.forEach (native)
at forEachAccumulated (http://localhost:7770/static/bundle.js:44180:9)
at Object.processEventQueue (http://localhost:7770/static/bundle.js:7652:7)
at runEventQueueInBatch (http://localhost:7770/static/bundle.js:74532:18)
at Object.handleTopLevel [as _handleTopLevel] (http://localhost:7770/static/bundle.js:74548:5)
at handleTopLevelWithoutPath (http://localhost:7770/static/bundle.js:74651:24)
at handleTopLevelImpl (http://localhost:7770/static/bundle.js:74631:3)
at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:12582:20)
at Object.batchedUpdates (http://localhost:7770/static/bundle.js:42559:19)
at Object.batchedUpdates (http://localhost:7770/static/bundle.js:2907:20)
at dispatchEvent (http://localhost:7770/static/bundle.js:74762:20)
at HTMLDocument.wrapped (http://localhost:7770/static/bundle.js:63526:29)
You need to bind all of your functions. In React, the context of this is undefined. That is until you use bind() to change the context to be your Component.
You can do this one of two ways.
Using .bind()
class Comments extends React.Component {
constructor(props) {
super(props);
this.removeCommentMutation = this.removeCommentMutation.bind(this);
this.handleSubmitError = this.handleSubmitError.bind(this);
this.renderComment = this.renderComment.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
removeCommentMutation (postID, commentID) {
....
}
handleSubmitError (err) {
console.error(err.message);
}
renderComment (comments) {
return (
<div className="comment" key={comments.id}>
<p>
<strong>{comments.user}</strong>
{comments.text}
<button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>×</button>
</p>
</div>
);
}
handleSubmit (e) {
e.preventDefault();
this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
this.refs.commentForm.reset();
this.refs.author.focus();
}
render () {
const comments = this.props.post.comments || [];
const currentPosts = comments.map(this.renderComment);
return (
<div className="comments">
{currentPosts}
<form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
<input type="text" ref="author" placeholder="author"/>
<input type="text" ref="comment" placeholder="comment"/>
<input type="submit" hidden/>
</form>
</div>
);
}
};
}
Using Arrow functions - ES6
Typically the context of this in JavaScript is determined by how a function is called. With arrow functions, the context is lexical, meaning that this is determined by the outer scope (which in this case is your Comments component).
You can use arrow functions like so, which would mean you don't have to constantly bind() every single method.
class Comments extends React.Component {
constructor(props) {
super(props);
}
removeCommentMutation = (postID, commentID) => {
....
}
handleSubmitError = (err) => {
console.error(err.message);
}
renderComment = (comments) => {
return (
<div className="comment" key={comments.id}>
<p>
<strong>{comments.user}</strong>
{comments.text}
<button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>×</button>
</p>
</div>
);
}
handleSubmit = (e) => {
e.preventDefault();
this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
this.refs.commentForm.reset();
this.refs.author.focus();
}
render () {
const comments = this.props.post.comments || [];
const currentPosts = comments.map(this.renderComment);
return (
<div className="comments">
{currentPosts}
<form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
<input type="text" ref="author" placeholder="author"/>
<input type="text" ref="comment" placeholder="comment"/>
<input type="submit" hidden/>
</form>
</div>
);
}
};
}
Notice the foo = () => {} syntax. You don't have to do this for Component lifecycle methods e.g. componentWillMount, componentDidMount and you don't have to do this for render.
I want to pass a prop called verified through each map function and I am having difficulty setting it up.
UPDATE:
Passing verified to renderContinents works, but when add a parameter to renderCountry like this:
{continent.countries.map(renderCountry(null, verified))}
My output is blank. Shouldn't this work though?
Updated code:
const renderCities = cities => {
return (
<div>
<label>
<input
onChange={onChange}
type="checkbox"/>
{cities.name}
</label>
</div>
);
};
const renderCountries = ({country, verified}) => {
console.log("came to country");
return (
<div className="city-location">
<label>
<input
onChange={onChange}
type="checkbox"/>
{country.name}
</label>
{country.cities.map(renderCities)}
</div>
);
};
function onChange(e) {
console.log('checkbox verified:', (e.target.verified));
}
class AreasComponent extends Component {
constructor(props) {
super(props);
this.state = {
};
this.renderContinents = this.renderContinents.bind(this);
}
componentWillMount() {
this.props.fetchAllAreas();
}
renderContinents(verified, continent) {
console.log("came to continent");
return(
<div className="continent-location">
<label>
<input
onChange={onChange}
type="checkbox"/>
{continent.name}
</label>
{continent.countries.map(renderCountries(null, verified))}
</div>
)
}
render() {
if (!this.props.verified || !this.props.areas) {
return <div>Loading Areas...</div>
}
return(
<div>
{this.props.areas.map(this.renderContinents.bind(this, this.props.verified))}
</div>
);
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({ fetchAllAreas, checkArea}, dispatch);
}
function mapStateToProps(state) {
return { areas: state.areas.all,
verified:state.areas.verified
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AreasComponent);
My other problem is the onChange(e) function. It's global so it works when I click any checkbox, but I want to make it so that when onChange is clicked, it can take in a parameter and dispatch the action checkArea, which, to me means it has to be bound and should also be fed as a parameter. I tried this:
{this.props.areas.map(this.renderContinents.bind(this, this.props.verified, this.props.checkArea))}
but it returns a blank result. Is it possible to send a function into a map () parameter and is there a way to get renderCountry/renderCity to work with parameters?
When you .bind parameters, those parameters become the first value(s) passed to the function. You should have noticed that when looking at the console.log output.
I.e. when you do
var bar = foo.bind(this, x, y);
bar(z);
you get the values in this order:
function foo(x, y, z) {}
You have switch the order of parameters in your function:
renderContinent(checked, continent) {
// ...
}
However, you can just keep the code you have. You don't have to pass the value to renderContinents.
In order to pass it to renderContinents etc, either .bind it or put the call inside another function:
continent.countries.map(renderCountries.bind(null, verified))
// or
continent.countries.map(country => renderCountries(country, verified))
In fact, the simplest way for renderCountry/renderCity to call onChange() with checkArea action is to put them inside AreasComponent (i.e. as member functions). So they can access both onChange and checkArea.
class AreasComponent extends Component {
constructor(props) {
super(props);
this.state = {};
this.onChange = this.onChange.bind(this);
}
componentWillMount() {
this.props.fetchAllAreas();
}
onChange(e, type) {
console.log('checkbox verified:', this.props.verified);
// call checkArea() here with your parameters
this.props.checkArea(type);
}
renderCities(cities) {
return (
<div>
<label>
<input
onChange={e => this.onChange(e, 'city')}
type="checkbox"/>
{cities.name}
</label>
</div>
);
};
renderCountries(country) {
console.log("came to country");
return (
<div className="city-location">
<label>
<input
onChange={e => this.onChange(e, 'country')}
type="checkbox"/>
{country.name}
</label>
{
country.cities.map(this.renderCities)
}
</div>
);
};
renderContinents(continent) {
console.log("came to continent");
return(
<div className="continent-location">
<label>
<input
onChange={e => this.onChange(e, 'continent')}
type="checkbox"/>
{continent.name}
</label>
{
continent.countries.map(this.renderCountries)
}
</div>
)
}
render() {
if (!this.props.verified || !this.props.areas) {
return <div>Loading Areas...</div>
}
return(
<div>
{
this.props.areas.map(this.renderContinents)
}
</div>
);
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({ fetchAllAreas, checkArea}, dispatch);
}
function mapStateToProps(state) {
return {
areas: state.areas.all,
verified: state.areas.verified
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AreasComponent);