Category «ReactJS»

How to fix _this.props.dispatch is not a function in React.JS

When you got error _this.props.dispatch is not a function, you can try below things: 1) Convert the (handleSubmit) function to an arrow function so in that case, it won’t have its own this. handleSubmit = (user) => { // …logic here } 2) Create a constructor inside the component and do the next step: this.handleSubmit = this.handleSubmit.bind(this) …

ReactJS support IE11/IE10/IE9/IE8

@php $ua = htmlentities($_SERVER[‘HTTP_USER_AGENT’], ENT_QUOTES, ‘UTF-8’); if (preg_match(‘~MSIE|Internet Explorer~i’, $ua) || (strpos($ua, ‘Trident’) !== false )) { //echo ‘<h3>Only for IE</h3>’ . $ua; echo'<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js”></script>’; } @endphp

How to fix Support for the experimental syntax ‘classProperties’ isn’t enabled

Error: esources/reactSkilledMigrantPoint/containers/TaskAddContainer.js failed (from ./node_modules/babel-loader/lib/index.js): F:\document_root_002\xinxilan.org\laravel\resources\reactSkilledMigrantPoint\containers\TaskAddContainer.js: Support for the experimental syntax ‘classProperties’ isn’t enabled (20:18): andleChange = event => { ^ this.setState({ [event.currentTarget.name]: event.currentTarget.value }); lugin-proposal-class-properties (https://git.io/vb4SL) to the ‘plugins’ section of your Babel config to enable transformation. t.raise (F:\document_root_002\xinxilan.org\laravel\node_modules\@babel\parser\lib\index.js:3851:17)   How to fix: add .babelrc to the root path: { “presets”: [ “@babel/preset-env”, “@babel/preset-react” …

How to set variable in .map() in ReactJS

render() { this.yearTransactionNum=0; return ( …. {this.props.transactions.length > 0 && this.props.transactions.map((transaction,index) => { if ( this.props.invoiceYear == ‘All’ || transaction.date_formated.indexOf(this.props.invoiceYear) != -1 ) { this.yearTransactionNum++; return ( <React.Fragment> ….. ) else { … } {(this.props.transactions.length > 0 && this.yearTransactionNum == 0) && <div className=’text-center col-md-12 p-5′><i class=”fa fa-exclamation-triangle mr-2″aria-hidden=”true”></i>No Transaction for Year {this.props.invoiceYear}</div> }

How to automatically scroll to the top of the page after render() in React JS

Assume we have a long list page, click a link after scroll down few screens and the new page scroll bar stay at the middle !! How to automatically scroll to the top of the page after render() in React JS componentDidUpdate() { // ReactDOM.findDOMNode(this).scrollTop = 0 // ReactDom.findDOMNode(this).scrollIntoView(); window.scrollTo(0, 0) } Tested and on window.scrollTo(0, 0) works …

How to add google map javascript api into ReactJS component

To avoid error: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors You need to remove the google api script in unmount componentDidMount() { const Id = this.props.match.params.id axios.get(`${this.api_basic}/${Id}`, { params: { //limit: 885, } }).then(response => { … this.showGoogleMaps(response.data.data.address) }) } componentWillMount() { // Start …

VueJs/ReactJS await for async axios function get/post method and sleep(n) seconds

Note: you cannot use await unless your function is marked async sleep(ms) { return new Promise(resolve=>setTimeout(resolve, ms)); }, async onSubmit() { this.loading=true; this.reports= []; if ( this.all_builders_selected ){ // NOT GOOD, GOT ERROR 429 (Too Many Requests) for (let [index, builder] ofthis.builders.entries()) { await this.sleep(1000); await this.getOneReport(builder.id); console.log(builder.id, index) //if ( index > 5 ) …

How to use ReactJS upload file in a update form send data to Laravel api backend

jsx: <form enctype=”multipart/form-data”>< input id=”photo” accept=”image/*” name=”photo” type=”file” /> js: handleFieldChange(event) { if ( event.target.type == ‘file’){ this.setState({ [event.target.name]: event.target.files[0] }) } else { this.setState({ [event.target.name]: event.target.value }) } } let formData = new FormData(); formData.append(“_method”, ‘PUT’); for (let key in this.state) { //console.log(this.state[key]); formData.append(key, this.state[key]); } //console.log(formData); return false; axios.post(`/api/xxxx`, formData) .then(response => { …