I am trying to create a dynamic header using Vue in a Nuxt application. However, the problem is two-fold:
1) I cannot get the template in the original DOM to be filled in with the template in the external file, which I was able to do by making the whole thing in .html files. I normally would use new Vue(el:...) for this, however even after including the latest version in the <head>, I cannot make that solution work.
2) I cannot get the proper data to display. When trying to insert the text, I can either get the index that I pass in, or it will error out.
My component that I am trying to pass in:
<template id="comp-dem-template">
<header-component>
<!-- Should call the function in "data" then replace the title. Instead has error about how it cannot search with 'in' -->
<span slot="pagetitle">
{{title}}
</span>
</header-component>
</template>
<script>
module.exports = {
el: '#header-component',
template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>',
props: ['index'],
data: function () {
if (this.index == 0){
title: 'Index';
}
else if (this.index == 1){
title: 'Events';
}
else if (this.index == 2){
title: 'Policy';
}
else if (this.index == 3){
title: 'Frequently Asked Questions';
}
else if (this.index == 4){
title: 'Reservations';
}
else if (this.index == 5){
title: 'View Reservations';
}
else {
title: 'Make a Reservation';
}
}
}
</script>
And the place I am trying to pass it in to:
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
</head>
<template>
<div class="container">
<logo />
<!-- This should be replaced with <h1><span>(name)</span></h1> according to my normal HTML version, however it doesn't here -->
<headercomponent index="0" />
<navbar/>
</div>
</template>
<script>
import Logo from '~/components/Logo.vue'
import headercomponent from '~/components/header-component.vue'
import navbar from '~/components/nav-bar.vue'
export default {
components: {
Logo,
headercomponent,
navbar
}
}
// Where I would normally try to insert it. However, even using the newest vue in the head won't let me do this ('Vue is not defined')
new Vue({ el: '#comp-dem-template' })
</script>
Your component has a lot of garbage, let's clean a little,
<template>
<span class="header-link">
{{ title }}
</span>
</template>
<script>
module.exports = {
name: 'header-component',
props: ['title']
}
</script>
<style>
.header-link {
}
</style>
You can call them using:
<header-component title="some text" />
in this way you keep the code clear and simple, but if you absolutely need send a index value here the component:
<template>
<span class="header-link">
{{ title }}
</span>
</template>
<script>
module.exports = {
name: 'header-component',
props: ['index'],
data: function() {
return {
title: ''
}
},
mounted: function() {
if (this.index === 0) {
this.title = 'Index'
} else if (this.index === 1) {
this.title = 'Events'
} else if (this.index === 2) {
this.title = 'Policy'
} else if (this.index === 3) {
this.title = 'Frequently Asked Questions'
} else if (this.index === 4) {
this.title = 'Reservations'
} else if (this.index === 5) {
this.title = 'View Reservations'
} else {
this.title = 'Make a Reservation'
}
}
}
</script>
<style>
.header-link {
}
</style>
use them like your example
<headercomponent index="0" />
the important part is understand the vue lifecycle, https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks, so Props not exist directly in data, but exist in mounted.
Related
I just want to write class plan__part_${this.res} within element
v-bind:class="{[`plan__part_${this.res}`]: true }"
:key="item.id"
></div>```
As you can see in following snippet your code working fine, don't use this in template:
new Vue({
el: '#demo',
data() {
return {
res: '1',
item: {id: 1}
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
.plan__part_1{
background: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div :class="{[`plan__part_${res}`]: true }" :key="item.id">
{{ res }}
</div>
</div>
For this case if your current implementation is not working then you can try using computed
v-bind:class="getClass"
:key="item.id"
></div>
and in
computed: {
getClass() {
if(this.flag) return `plan__part_${this.res}`;
return '';
}
Note: this.flag is actually the boolean that you have used in the template
Currently i am using buefy autocomplete.But there are a few issues with it.
DepartmentDetail.vue
<template slot-scope="props">
<div class="container is-fluid">
<b-loading :is-full-page="true" :active.sync="this.isLoading"></b-loading>
<b-field label="Business Unit">
<b-autocomplete
:data="dataBusinessUnit"
placeholder="select a business unit..."
field="businessUnit"
:loading="isFetching"
:value="this.objectData.businessUnit"
#typing="getAsyncDataBusinessUnit"
#select="(option) => {updateValue(option.id,'businessUnit')}"
>
<template slot-scope="props">
<div class="container">
<p>
<b>ID:</b>
{{props.option.id}}
</p>
<p>
<b>Description:</b>
{{props.option.description}}
</p>
</div>
</template>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
</div>
</template>
Function that fetches the results based on user input-
getAsyncDataBusinessUnit: debounce(function(name) {
// console.log('getAsyncDataBusinessUnit you typed'+name);
if (!name.length) {
this.dataBusinessUnit = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/${name}`)
.then(response => {
this.dataBusinessUnit = [];
response.forEach(item => {
this.dataBusinessUnit.push(item);
});
})
.catch(error => {
this.dataBusinessUnit = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
So instead of using the buefy's b-autocomplete i want to create and use my own autocomplete component.
So i went ahead and created my own autocomplete component and called it from the DepartmentDetail vue page like this-
DepartmentDetail.vue
<b-field label="Custom Business Unit ">
<AutoComplete :method="getAsyncDataBusinessUnit" title='businessUnit' :autocompleteData="dataBusinessUnit" viewname='DepartmentDetail'>
</AutoComplete>
</b-field>
AutoComplete.vue
<template>
<div class="autocomplete">
<input style="font-size: 12pt; height: 36px; width:1800px; " type="text" v-model="this.objectData[this.title]" #input="getAsyncDataBusinessUnit"/>
<ul v-show="isFetching" >
<li v-for="(dataBusinessUnit, i) in dataBusinessUnit" :key="i" #click="setResult(dataBusinessUnit)" >
<!-- {{ autocompleteData }} -->
<template v-if="title!='manager'">
<div class="container">
<p>
<b>ID:</b>
{{dataBusinessUnit.id}}
</p>
<p>
<b>Description:</b>
{{dataBusinessUnit.description}}
</p>
</div>
</template>
<template v-else>
<div class="container">
<p>
<b>ID:</b>
{{dataBusinessUnit.id}}
</p>
<p>
<b>First Name:</b>
{{dataBusinessUnit.firstName}}
</p>
<p>
<b>Last Name:</b>
{{dataBusinessUnit.lastName}}
</p>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
import { viewMixin } from "../viewMixin.js";
import schemaData from '../store/schema';
import debounce from "lodash/debounce";
import api from "../store/api";
const ViewName = "AutoComplete";
var passedview;
export default {
name: "AutoComplete",
props: {
method: {
type: Function
},
title: String,
viewname:String,
autocompleteData: {
type: Array,
required: true
}
},
data() {
return {
// results: [],
dataBusinessUnit: [],
isFetching: false
// vignesh: this.objectData[this.title]
};
},
computed: {
viewData() {
return this.$store.getters.getViewData('DepartmentDetail')
},
objectData() {
return this.$store.getters.getApiData(this.viewData.api_id).data
},
sessionData() {
return this.$store.getters.getSessionData()
},
isLoading() {
return this.$store.getters.getApiData(this.viewData.api_id).isLoading
},
newRecord() {
return this.$route.params.id === null;
},
getTitle() {
return this.title
}
},
mounted() {
},
methods: {
setResult(result) {
this.updateValue(result.id,this.title);
// localStorage.setItem(this.title,result.id );
this.isFetching = false;
},
updateValue(newValue, fieldName) {
var val;
var schema = schemaData[this.viewData.schema];
if(typeof schema!=='undefined' && schema['properties'][fieldName]['type'] == 'date'){
val = this.formatDate(newValue);
} else {
val = newValue;
}
this.$store.dispatch('updateDataObjectField', {
key: this.viewData.api_id,
field: fieldName,
value: val
});
},
getAsyncDataBusinessUnit: debounce(function(name) {
console.log('getAsyncDataBusinessUnit you typed'+name.target.value);
if (!name.target.value.length) {
this.dataBusinessUnit = [];
this.isFetching = false;
return;
}
// this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/${name.target.value}`)
.then(response => {
this.dataBusinessUnit = [];
if (!response.length)
{
console.log('inside if')
this.isFetching = false;
}
else{
console.log('inside else')
response.forEach(item => {
this.dataBusinessUnit.push(item);
});
this.isFetching = true;
}
console.log('length of dataBusinessUnit is '+(this.dataBusinessUnit).length)
console.log('contents of dataBusinessUnit array '+JSON.stringify(this.dataBusinessUnit))
})
.catch(error => {
this.dataBusinessUnit = [];
throw error;
})
.finally(() => {
// this.isFetching = true;
});
}, 500),
},
components: {
}
};
</script>
The issue iam facing is whenever i start to type anything into the Custom Business Unit input field, then immediately after 1-2 seconds the value gets reset(with the value coming from the store getters ).This however does not happen if i remove the line this.dataBusinessUnit = []; in the getAsyncDataBusinessUnit function . Why is this happening? I even tried using :input instead of v-model for the input field , but i am still facing the same issue.And also second issue is when i click an existing record under DepartmentDetail page, the value that should be set for the custom business unit input field coming from the store getters (this.objectData.businessUnit) is not showing up sometimes? please help
The basic logic of an autocomplete is not really hard:
Vue.component('Autocomplete', {
props: ['list'],
data() {
return {
input: null
}
},
template: `<div><input v-model="input" #input="handleInput"><div class="bordered" v-if="input"><ul><li v-for="(item, i) in list" :key="i" #click="setInput(item)">{{ item }}</li></ul></div></div>`,
methods: {
handleInput(e) {
this.$emit('input', e.target.value)
},
setInput(value) {
this.input = value
this.$emit('input', value)
}
}
})
new Vue({
el: "#app",
computed: {
filteredList() {
if (this.filterInput) {
return this.list.filter(e => e.toLowerCase().indexOf(this.filterInput.toLowerCase()) !== -1)
} else {
return this.list
}
}
},
data: {
filterInput: null,
list: [
"First",
"Second",
"Third",
"Fourth",
"Fifth",
"Sixth",
"Seventh"
]
},
methods: {
handleInput(e) {
this.filterInput = e
}
}
})
.bordered {
border: 1px solid black;
display: block;
}
ul li {
cursor: pointer;
}
ul li:hover {
background: rgba(0, 0, 0, 0.3)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<autocomplete :list="filteredList" #input="handleInput" />
</div>
I wouldn't handle the data in the presentational component (autocomplete is a presentational component in the structure I created), but in its parent-container. That way the autocomplete just gets a list as a prop and displays it; every action is $emitted to the parent, who does the data-handling.
It's easier to control displayed data this way - even with an async data source.
I have a vue app and a component. The app simply takes input and changes a name displayed below, and when someone changes the name, the previous name is saved in an array. I have a custom component to display the different list items. However, the component list items do not render immediately. Instead, the component otems render as soon as I type a letter into the input. What gives? Why would this not render the list items immediately?
(function(){
var app = new Vue({
el: '#app',
components: ['name-list-item'],
data: {
input: '',
person: undefined,
previousNames: ['Ian Smith', 'Adam Smith', 'Felicia Jones']
},
computed: {
politePerson: function(){
if(!this.person) {
return 'Input name here';
}
return "Hello! To The Venerable " + this.person +", Esq."
}
},
methods: {
saveInput: function(event){
event.preventDefault();
if(this.person && this.previousNames.indexOf(this.person) === -1) {
this.previousNames.push(this.person);
}
this.setPerson(this.input);
this.clearInput();
},
returnKey: function(key) {
return (key + 1) + ". ";
},
clearInput: function() {
this.input = '';
},
setPerson: function(person) {
this.person = person;
}
}
});
Vue.component('name-list-item', {
props: ['theKey', 'theValue'],
template: '<span>{{theKey}} {{theValue}}</span>'
});
})()
And here is my HTML.
<div id="app">
<div class="panel-one">
<span>Enter your name:</span>
<form v-on:submit="saveInput">
<input v-model="input"/>
<button #click="saveInput">Save</button>
</form>
<h1>{{politePerson}}</h1>
</div>
<div class="panel-two">
<h3>Previous Names</h3>
<div>
<div v-for="person, key in previousNames" #click='setPerson(person)'><name-list-item v-bind:the-key="key" v-bind:the-value="person" /></div>
</div>
</div>
</div>
You are not defining your component until after you have instantiated your Vue, so it doesn't apply the component until the first update.
I am trying to get the native HTML 5 drag & drop working in my angular app. I got the drag, fire the drag & the dragOver events, but the drop unfortunately doesn't fire anything. Here I have the HTML and drag events code below.
<ul *ngFor="let channel of channelList" >
<li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head"
style="float:left; margin:0.5px" draggable="true" (dragstart)="drag(channel)">
<ng-container *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}" width="100" height="100">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}"
width="100" height="100" >
</ng-template>
</li>
</ul>
<ul class="list-group" *ngFor="let channels of currentPickSelection" dropzone="copy">
<li class="list-group-item" style="float:Left; margin-left:0.5px" (dragover)="dragOver(channels[0])" (dragend)="drop(event)">
<ng-container *ngIf="channels[0].compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
<img class="img-rounded" src="{{ channels[0].compChannel.compChannelLogo }}" alt="{{ channels[0].compChannel.compChannelName }}"
width="70" height="70">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
</ng-template>
<br>
<strong>
<font size="2">{{ channels[0].pickCode }}</font>
</strong>
</li>
</ul>
drag(channel) {
console.log(channel);
}
dragOver(channel) {
this.draggedChannel = channel;
// console.log(this.draggedChannel);
}
drop(e) {
console.log(e);
}
I made it without any other module in Angular 2/4/5/6, You can also make it by using below code:
drag.component.html:
<h2>Drag and Drop demo</h2>
<div id="div1"
(drop)="drop($event)"
(dragover)="allowDrop($event)">
<img
src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350"
draggable="true"
(dragstart)="drag($event)"
id="drag1"
width="88"
height="31">
</div>
<div id="div2"
(drop)="drop($event)"
(dragover)="allowDrop($event)">
</div>
drag.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'drag-root',
templateUrl: './drag.component.html',
styleUrls: ['./drag.component.css']
})
export class AppComponent {
drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
allowDrop(ev) {
ev.preventDefault();
}
drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
}
drag.component.css:
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
Stackblitz example
<div (dragover)="onDragOver($event)"
(dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
</div>
In your Component:
onDrop(event: any) {
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
}
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
}
To use drag and drop in angular 4 application you can use npm module "ngx-uploader".
You will find the integration step from below link:
https://www.npmjs.com/package/ngx-uploader
All the imports parameter and classes you can take from the above link.
Here is my code for angular:
if (output.type === 'allAddedToQueue') { // when all files added in queue
// uncomment this if you want to auto upload files when added
const event: UploadInput = {
type: 'uploadAll',
url: API_BASE +'/api/uploads',
method: 'POST',
data:{total_files: this.files.length.toString()}
};
this.uploadInput.emit(event);
} else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { // add file to array when added
this.files.push(output.file);
} else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
this.dragOver = false;
} else if (output.type === 'drop') {
this.dragOver = false;
}else if (output.type === 'done') {
if (output.file.response.status == 200) {
var uploaded_files = output.file.response.data;
this.propertyImage.push(uploaded_files);
}
else {
this.msgs = [];
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'unable to upload images' });
}
In the above code for output === done, you will get response from server side (In my case nodejs)
Below you can find the code for backend:
var formidable = require('formidable'),
http = require('http'),
util = require('util');
var form = new formidable.IncomingForm();
var src = './public/images/properties';
var dst_small = './public/images/properties/small'
var dst_medium = './public/images/properties/medium'
var validImage = false;
form.keepExtensions = true; //keep file extension
form.uploadDir = src;
form.onPart = function (part) {
if (!part.filename || part.filename.match(/\.(jpg|jpeg|png)$/i)) {
validImage = true;
this.handlePart(part);
}
else {
validImage = false;
return res.json({ status: 404, msg: part.filename + ' is not allowed.' });
}
}
form.parse(req, function (err, fields, files) {
if (validImage) {
var image = files.file.path.split("/")[3];
var name = files.file.path.split("/")[3];
easyimg.rescrop({
src: files.file.path, dst: dst_small + '/' + files.file.path.split('/')[3],
width: 100, height: 100,
cropwidth: 100, cropheight: 100,
x: 0, y: 0
}).then(
function (image) {
// console.log('Resized and cropped: ' + image.width + ' x ' + image.height);
},
function (err) {
// console.log(err);
}
);
// for largeImage
easyimg.rescrop({
src: files.file.path, dst: dst_medium + '/' + files.file.path.split('/')[3],
width: 300, height: 300,
cropwidth: 300, cropheight: 300,
x: 0, y: 0
}).then(
function (image) {
// console.log('Resized and cropped: ' + image.width + ' x ' + image.height);
return res.json({ status: 200, msg: 'Uploaded images', data: image });
},
function (err) {
console.log(err);
}
);
} else {
return res.json({ status: 500, msg: constant.message.error_profile_pic_type });
}
});
Please change your image path according to your file path. I have used this code and it worked for me.
Hope the above code will help for you.
Thanks !!
Here is a solution on Angular 7:
Material (https://material.angular.io/) explains it perfectly (you have to take version >= 7.1). Here is a link to API.
First, import "DragAndDrop" module in your modules:
import {DragDropModule} from '#angular/cdk/drag-drop';
Then you just have to add "cdkDrag" directive to your HTML element:
<div class="example-box" cdkDrag>
Drag me around
</div>
Stackblitz (from material):
here
It's really easy to use and there are interesting options if you need to do a more specific drag and drop (for example with a position locking) !
Simple but most powerful package
supports angular version >= 4.x
for documentation
for demo
How to use it?
Install
// if you use npm
npm install angular2-draggable
// or if you use yarn
yarn add angular2-draggable
Import
import { AngularDraggableModule } from 'angular2-draggable';
#NgModule({
imports: [
...,
AngularDraggableModule
],
})
export class AppModule { }
and finally use
// Basic Usage
<div ngDraggable>Drag Me!</div>
Use drop event. This will fire only when you drop a file.
This is this the way I got it working.
preventDefault() functions throws error, changed it for return false which worked fine. Thanks guys for the prompt responses.
drag(channel) {
console.log(channel);
}
onDragOver(channel: any) {
console.log("Drag Over");
return false;
}
onDrop(e:any) {
console.log("Drop");
}
I want to replace a broken link with a default image in react. I'd typically use onerror for this but it is not working as expected. Specifically, I get repeated errors of "Cannot update during an existing state transition (such as within render)." Eventually, the default image appears, but it takes a long time (many prints of this error). This is a very similar question asked here: react.js Replace img src onerror. I tried this solution (top one, not using jQuery) but it causes the error described. I guess onError must be getting triggered continually, thus causing the constant rerendering. Any alternative solutions/fixes?
import React from 'react';
import { connect } from 'react-redux';
//import AddImageModal from '../components/AddImageModal.js';
import Button from 'react-bootstrap/lib/Button';
//import { getPostsByUserId } from 'actions'
import Posts from '../components/Posts.js';
var Modal = require('react-modal');
require('../../styles/AddImageModal.scss');
import { save_post } from '../actions';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
var MyWallScreen = React.createClass({
getInitialState: function() {
return {
modalIsOpen: false,
imageUrl: ""
};
},
openModal: function() {
this.setState({modalIsOpen: true});
},
afterOpenModal: function() {
// references are now sync'd and can be accessed.
this.refs.subtitle.style.color = '#f00';
},
closeModal: function() {
this.setState({modalIsOpen: false});
},
setUrl: function(e,val)
{
if (e.keyCode === 13)
{
this.setState({
imageUrl: val
});
}
},
resetImageUrl: function()
{
this.setState({
imageUrl: ""
});
},
onError: function() {
this.setState({
imageUrl: "default.jpg"
});
},
render: function() {
const { userPosts, dispatch } = this.props;
return (
<div>
<button onClick={this.openModal}>Add Image</button>
{/* The meat of the modal. */}
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles} >
<div className="modalBox">
<h2 className="modalBanner">Add an image link</h2>
<input ref="urlInput"
className="modalInput"
onKeyDown={e=>this.setUrl(e,this.refs.urlInput.value)}/>
{this.state.imageUrl ?
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError()}/>
:<div className="modalImage"></div>
}
<div>
<Button className="modalButton" bsStyle = "success"
onClick = {() => {
dispatch(save_post(0,this.state.imageUrl));
this.closeModal();
this.resetImageUrl();
}}>
Post
</Button>
<Button className="modalButton" bsStyle = "danger"
onClick = {() => {
this.closeModal();
this.resetImageUrl();
}}>
Cancel
</Button>
</div>
</div>
</Modal>
<Posts posts={userPosts}/>
</div>
);
}
});
function mapStateToProps(state, ownProps) {
return {
userPosts: state.posts[0]
}
}
MyWallScreen = connect(mapStateToProps)(MyWallScreen);
export default MyWallScreen;
The code is calling this.onError rather than passing a reference to it. Every call to render is calling this.onError(). Remove the parentheses, and see if that fixes it:
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError()}/> // `onError` is being called here
Fixed version:
<img className="modalImage"
src={this.state.imageUrl}
onError={this.onError}/> // `onError` is being passed as a reference here
You can replace the image broken link without keeping image urls in state.
<img
onError={(event)=>event.target.setAttribute("src","default-image-link")}
src="image-broken-link"
/>
I tried this way and it works for me hope this will work for you.
Make sure to put the below useState within same function where u used img tag.
const [error, setError] = useState(false);
<img src={`${error ? DefaultLogo
:`${AgentApiURL}/publicservices/images/${props.item[0]}`}`}
alt="plating"
onError={() => setError(true) }
/>