Category «ReactJS»

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 => { …

Dynamic loop and set this.state base on result/record from the database

Dynamic loop and set this.state base on result/record from the database componentDidMount() { axios.get(‘/api/providers/’+this.state.provider_id, { params: { //filter: ‘id;phone;company_name;email’, } }).then(response => { letitem=response.data.data; letnewStateObj= {} Object.keys(this.state).forEach(function(key) { if ( item[key]){ newStateObj[key] =item[key] } }); this.setState(newStateObj); }) }

Use React.Fragment to avoid JSX elements must be wrapped in an enclosing tag

app.js:62227 Uncaught Error: Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag function Glossary(props) { return ( <dl> {props.items.map(item => ( // Without the `key`, React will fire a key warning <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))} </dl> ); } Warning: Each child in an array or iterator should have …

Laravel webpack.mix.js set up externals to reduce the size of app.js from 400KB to 66KB

Laravel webpack.mix.js set up externals and use third CDN js file to reduce the size of app.js const mix = require(‘laravel-mix’); /* |————————————————————————– | Mix Asset Management |————————————————————————– | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | …