We Keep Coding

Delete a Container with an Anchor

I'm new to React and I'm creating a Wiki of my repositories on GitHub.
So, I want to remove that item from my list when I click "Remover" and open the repository on a new page when I click "Ver repositório".
But there's is my problem!
When I click the red anchor, it does remove, like I expected. Also, when I click the blue Anchor, it open the repository page and ALSO removes the list. What should I do?
This is the function that I created to remove the repository:
const handleRemoveRepo = (id) => {
const remove = repos.filter((repo) => repo.id !== repo.id);
setRepos(remove);
if ((repo) => repo.id === repo.id) {
return null;
}
And this is the container to map everything:
<Container>
{repos.map(repo => <ItemRepo handleRemoveRepo={handleRemoveRepo} repo={repo} />)}
</Container>
My container comes from this index.js:
<ItemContainer onClick={handleRemove}>
<h3>{repo.name}</h3>
<p>{repo.full_name}</p>
Ver repositório <br />
Remover
<hr />
</ItemContainer>
Thanks in advance.
React App page for example
I tried switching the conditional on my function, exporting a new function on ItemRepo, but both didn't work.

The "remove" click handler is assigned to the container, so it will be invoked if you click anywhere in the container:
<ItemContainer onClick={handleRemove}>
If it should only be invoked when clicking a specific link, assign the click hander to that specific link instead:
<a href="#" className="remove" onClick={handleRemove}>Remover</a>
As an aside... This shouldn't be a link. It's not navigating the user anywhere, but is just performing an action in code. A <button> is a more semantically appropriate element for that. Which can be styled to not have the defaul button background, or styled however you want.

Render a whole new componnent on callback event (onClick for example)

I am trying to render a whole new component into a page when there's is event.
For example I have a button that sends request to DB, and I want that whenever this button is clicked a NEW toaster will open that will say "sent".
I saw this - Way to render a new component onClick in react js
And it just shows how to set toggle to show or hide element, but I want to add new one, so I will be able to add multiple of them.
export default function Demo() {
function handleClick() {
// show notification "clicked"
}
return (
<div>
<button onClick={() => handleClick()}>Click to update</button>
</div>
)
}

You can find a working sample in this codesandbox. I have used ant design to generate the notification. This comes out of the box without custom config. You can click the button as many times as you want and each time a new notification will be displayed.
The only things you need to do is:
Add antd to your dependencies in package.json
Add import "antd/dist/antd.css" to your index file
Start using notification right away in your component.

React file input onChange not changing the picture?

I am getting a thumbnail from the user for a particular store. When the file Browse button is clicked, and an image is opened, this sets the thumbnail for the given store; however, I have also added a small x button on the top right of the thumbnail whose purpose in life is to remove this picture and to add a new one. The main problem that I am facing is when I select a thumbnail, and when I click on the x button, it removes the image, but if I choose the same drawn image, it does not add it as a thumbnail. So I have to select a different image to choose the old one.
import thumbnail from "../../../../Assets/thumbnail.png";
import deleteicon from "../../../../Assets/close.svg";
const thumbimage = dataType64toFile(thumbnail);
const [image, setImage] = useState(thumbimage);
const [filename, setFileName] = useState("Upload Image");
const [picture, setPicture] = useState(thumbnail);
const [close, setClose] = useState(false);
{close && (
<img
src={deleteicon}
alt="Delete Thumbnail"
className="thumbnail-close"
onClick={() => {
setImage(thumbimage);
setPicture(thumbnail);
setFileName("Upload Image");
setClose(false);
}}
/>
)}
<Form.File
type="file"
label={filename}
onChange={(e) => {
setImage(e.target.files[0]);
setFileName(e.target.files[0].name);
setPicture(URL.createObjectURL(e.target.files[0]));
setClose(true);
}}
custom
/>

I had recently created the same gallery of images, but my approach involved a custom hook file outside my component, i.e. I just put all my useStates and handler function outside and imported it from there.
first a tweak, don't use const [close, setClose] = useState(false); instead check using image.
set your file and image as null as and when you click delete icon
regarding thumbnail and other don't set em! instead place the icon in the container and when an image is selected let it cover it!

Image click - Open a Dialog or Popup

I have web page which display product images. These images are coming from server (images are not specific or dynamic images ) over HTTP request in JSON format. This JSON has information about each image.
I want to add dialog or popup box with respective image information when you click on image with Javascript ES6 Engine. How I can pass image Information from JSON to dialog or popup when I click a specific image.

Let's assume you wrote
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then you may retrieve the id value writing
document.getElementById("xyz").dataset.id
In your case, since you want to use the value when the image is clicked, you may use an onClick event handler, like this:
<img data-id="alpha" src="http://some.url/image.jpg" onClick="someFunction();" />
and then have
someFunction = (ev) => {
let id = ev.target.dataset.id;
// Put here the code to open you dialog or popup
// based on the data retrieved by using the id
}

This also works assuming you used the same image element mentioned by #Ed
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then drop in the following JS to select the image by the ID:
const image = document.querySelector("#xyz");
Then use the following code to "listen" for a click on the image:
image.addEventListener("click", popup);
Then use the following code to create a popup:
function popup() {
alert("Hello! I am a popup!!");
}

Angular-Cli force component to reload image cache

I have a project in Angular CLI, it has the lft menu (where I store some navigation and user informations include user image. On the right side there is other part of page.
I have a feature that user can change his image. Its working like charm but when I change it, the picture in the left menu is old one (the URL is the same, when I past URL to the browser I can see the new image). I guess its becouse the left panel wont refresh when I upload new image si It has cache of old image.
Is there any way how to solve it? Something like force component to refresh, delete image cache etc?

If I understand, the browser doesn't do request to image, because it's cached. It's because image path is the same.
So you can put timestamp to image path at the end:
// <img [src] = '/path/to/image?timeStamp=123123' />
class SomeComponent{
imageSrc: string = '/path/to/image';
// getTimeStamp(): number{
// return Date.now();
// }
// or call this when you need update image
updateImageSrc(): string{
this.imageSrc= `/path/to/image?timeStamp=${Date.now()}`
}
}
Update:
<img [src] = "imageSrc" />
Code example. Look at network tab