Category «ReactJS»

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

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