Tell me please.There's an array of objects.when user clicks on the icon to write this object in LocalStorage. But how to do it if there some objects to check.The problem that when writing to Local Storage, objects are overwritten. How to do it correctly?
{sortedProjects?.map((project) => (
<TableRow key={project._id} hover>
<TableCell>
<EmptyStar color='primary' className={classes.starIcon} onClick={()=>
{localStorage.setItem(`${project._id}`, JSON.stringify(project));
let list = JSON.parse(localStorage.getItem(`${project._id}`));
console.log(list)}/>
<Link>{project.name} </Link>
</TableCell>
</TableRow>
))}
Related
I want to showing the All Users List in Table using Table Row and Table body , but data is showing in console but not showing in table.
<TableBody>
{
users.map(user => (
<TableRow>
<TableCell>{users._id}</TableCell>
<TableCell>{users.name}</TableCell>
<TableCell>{users.username}</TableCell>
<TableCell>{users.email}</TableCell>
<TableCell>{users.phone}</TableCell>
</TableRow>
))
}
</TableBody>
React uses the key prop to create a relationship between the component and the DOM element that why it need a unique prop key for each child in list so what you should do is
<TableBody>
{
users.map(user => (
<TableRow key={user._id}>
<TableCell>{users._id}</TableCell>
<TableCell>{users.name}</TableCell>
<TableCell>{users.username}</TableCell>
<TableCell>{users.email}</TableCell>
<TableCell>{users.phone}</TableCell>
</TableRow>
))
}
</TableBody>
I displayed all the user data (it's an array with an object for user infos) in the Card component, but I wonder how I can delete the current Card when I click the button.
Thank you in advance!
{user && user.map(user => (
<div>
<Card email={user.email}/>
<button>Remove</button>
</div>
))}
At event handler to button element:
<button onClick={()=>handleRemove(user.id)}>Remove</button>
and create function to delete selected item:
const handleRemove (id) => {
return user.filter((user)=> user.id !== id)
}
Basically this is my code to render components
return (
<>
{props.Sites.map((Sites) => (
<Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
<Image src={Sites.imageUrl} alt={Sites.imageAlt} onClick={() => console.log(Sites.title)} />
<Box p='6'>
<Box display='flex' alignItems='baseline'>
<Box
color='gray.500'
fontWeight='semibold'
letterSpacing='wide'
fontSize='xs'
textTransform='uppercase'
ml='2'
>
Inverters {Sites.Inverters} • Size {Sites.PvSize} kW
</Box>
</Box>
<Box
mt='1'
fontWeight='semibold'
as='h4'
lineHeight='tight'
isTruncated
>
{Sites.title}
</Box>
</Box>
</Box>
))}
</>
)
}
i parse the object from props that the function then uses to render components.
what I'm trying to do is have those objects come from a database such as mongogdb. ive been trying to use mongoose with express server but nothing seems to be working. right now the objects are just written up before the function renders and id rather it come form an actual db.
i would like to know the proper approach to his kind of thing and where to go form here thanks.
I'm attempting to capture drawings for an app using the native-script drawingpad plugin. I'm working (among other things) from the helpful tutorial provided here:
Capturing Signatures with NativeScript + Angular
My component includes the following:
<GridLayout rows="*,auto" columns="*" backgroundColor="#FFFFFF">
<StackLayout col="0" row="0" horizontalAlignment="center" verticalAlignment="center" backgroundColor="#FFFFFF">
<Label [visibility]="signatureImage ? 'visible' : 'collapsed'" text="Preview" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
<Image [visibility]="signatureImage ? 'visible' : 'collapsed'" [src]="signatureImage" height="150" width="90%" borderColor="black" borderWidth="2"></Image>
<Label text="Sign/Update below" textWrap="true" horizontalAlignment="center" verticalAlignment="center" marginTop="20"></Label>
<DrawingPad #DrawingPad backgroundcolor="#FEFEFE" height="150" width="90%" id="drawingPad" penColor="#FF6B6B" penWidth="3" borderColor="black"
borderWidth="2">
</DrawingPad>
</StackLayout>
<GridLayout col="0" row="1" rows="auto,*" columns="*,*">
<Button col="0" row="0" colSpan="2" text="Clear Signature" (tap)="clearMyDrawing()"></Button>
<Button col="1" row="1" class="btn -primary" text="Save" (tap)="onDoneTap()"></Button>
</GridLayout>
</GridLayout>
In the TS I have the following:
onDoneTap(): void {
// get reference to the drawing pad
const pad = this.DrawingPad.nativeElement;
// then get the drawing (Bitmap on Android) of the drawingpad
let drawingImage;
pad.getDrawing().then(
(data) => {
console.log(data);
drawingImage = data;
this.signatureImageString = imageSourceModule.fromNativeSource(data).toBase64String("png");
//this.driverSvc.storeSignature(this.DRNO, this.signatureImageString,null,null,null);
},
(err) => {
console.log(err);
}
);
}
Running the application produces the following error at the console:
CONSOLE LOG file: src/app/deliveries/signatures/signatures.component.ts:43:22: <UIImage:0x280feb060 anonymous {729, 150}>
CONSOLE LOG file: node_modules/#nativescript/core/image-source/image-source.ios.js:344:0: fromNativeSource() is deprecated. Use ImageSource constructor instead.
Then it crashes.
Unfortunately the documents as far as I can see do not indicate that fromNativeSource() is deprecated. I need to be able to either 1) save the image as a file to subsequently upload, or 2) save the image as a base64 string for subsequent upload.
Doing it this way solved the problem:
onDoneTap(): void {
// get reference to the drawing pad
const pad = this.DrawingPad.nativeElement;
// then get the drawing (Bitmap on Android) of the drawingpad
pad.getDrawing().then(
( data) => {
const source = new imageSourceModule.ImageSource;
source.setNativeSource(data);
this.signatureImageString = source.toBase64String("png");
})
}
How do you add a brand new attribute to a node in an OpenLaszlo XML dataset?
The way to do this is to use the lz.datapointer.setNodeAttribute() function. If you use the setNodeAttribute() function with an attribute name that does not already appear on the node, a new one will be created.
In the sample OpenLaszlo application below, if you press the button titled [displayXML] after you compile the program, you will see the XML dataset before any changes are made does not contain any "fav_saying" attribute.
After you click the [updateAttribute] button to add the favorite saying for Homer via the setNodeAttribute() method, you can then click the [displayXML] button again and you will see that an attribute called 'fav_saying' has been added to the XML dataset.
<canvas height="665" width="1000" layout="axis: x" debug="true">
<dataset name="myData">
<myXML>
<person firstname="Homer" lastname="Simpson" />
<person firstname="Marge" lastname="Simpson" />
<person firstname="Montgomery" lastname="Burns" />
</myXML>
</dataset>
<button text="displayXML">
<handler name="onclick">
Debug.write(canvas.myData.serialize());
</handler>
</button>
<button text="updateAttribute">
<handler name="onclick">
var dp = canvas.myData.getPointer(); // get datapointer to XML data
dp.setXPath('myXML/person[#firstname="Homer"]'); // set xpath to Homer Simpson
dp.setNodeAttribute('fav_saying', 'DOH!');
</handler>
</button>
</canvas>
You will also see that multiple calls to setNodeAttribute() will not add additional 'fav_saying' attributes. If the program used a different value for the saying every time then the value in the 'fav_saying' attribute would change but there would still only be one 'fav_saying' attribute.