Please `bind ` the function in the `constructor`
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class App extends React.Component {
constructor(props){
super(props);
this.state={
value:""
}
this.submitClick = this.submitClick.bind(this);
this.change = this.change.bind(this);
}
change(e){
this.setState({
value : e.target.value
});
}
submitClick(){
alert(this.state.value);
}
render() {
return <div>
<form>
Email <input id="MainEmail" type="email"
placeholder ="Enter your email"
onChange={this.change}
/>
<button onClick={this.submitClick}
id="SubmitBtn">Request Invite
</button>
</form>
<br/><br/>
</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>
<!-- end snippet -->
Try a custom propTypes :
const childrenPropTypeLogic = (props, propName, componentName) => {
const prop = props[propName];
return React.Children
.toArray(prop)
.find(child => child.type !== 'div') && new Error(`${componentName} only accepts "div" elements`);
};
static propTypes = {
children : childrenPropTypeLogic
}
[Fiddle](https://jsfiddle.net/abdennour/9h69tt3o/)
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
const {Component, PropTypes} = React;
const childrenPropTypeLogic = (props, propName, componentName) => {
var error;
var prop = props[propName];
React.Children.forEach(prop, function (child) {
if (child.type !== 'div') {
error = new Error(
'`' + componentName + '` only accepts children of type `div`.'
);
}
});
return error;
};
class ContainerComponent extends Component {
static propTypes = {
children: childrenPropTypeLogic,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
class App extends Component {
render(){
return (
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
)
}
}
ReactDOM.render(<App /> , document.querySelector('section'))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section />
<!-- end snippet -->
