Develop Reference

How to correctly delete a dynamically added div panel from an array in React

I am trying to add a delete function for my ConnectedProducts.js page, but can't seem to pass the correct ID to my Modal which handles the delete function. The delete function should delete a div panel (which are saved in an array) from said page, and works by clicking a button on the page which opens up a Modal asking for confirmation before deleting.
I am not exactly sure how I even get the correct ID from my array since the divs are added to the array with the .map function. The delete function seems to atleast somewhat work since it takes an index number and deletes the specified indexed div. (Shortened the following code to a minimal working example)
ConnectedProducts.js:
import React from "react";
import "../Overview.css";
import Approve from "../icons/icon-dc_alert-success-filled.svg";
import Denied from "../icons/icon-dc_callout_hint.svg";
import Close from "../icons/icon-dc_close.svg";
import Add from "../icons/icon-dc_add.svg";
import ModalAddProduct from "../components/ModalAddProduct.jsx";
import { Link } from "react-router-dom";
import ModalDelete from "../components/ModalDelete.jsx";
import ModalProductSettings from "../components/ModalProductSettings.jsx";
const ConnectedProducts = () => {
const [stateComment, setStateComment] = React.useState("");
const [open, setOpen] = React.useState(false);
const [openDelete, setOpenDelete] = React.useState(false);
const [openSettings, setOpenSettings] = React.useState(false);
const [states, setStates] = React.useState([]);
const handleComment = (e) => {
setStateComment(e.target.value);
};
function getIndex() {
// What exactly do I need to return here? If I return 1 for an example I need to add
// two panels, and only the second panel would get deleted while the first one stays no matter what
// panel I want to delete
return 1;
}
return (
<div id="wrapper">
{open && <ModalAddProduct setOpen={setOpen} setStates={setStates} />}
{openDelete && <ModalDelete setOpen={setOpenDelete} setStates={setStates} states={states} index={getIndex()} />}
{openSettings && <ModalProductSettings setOpen={setOpenSettings} states={states} setStates={setStates} index={getIndex()} />}
<div class="component-headline">
<h1 style={{ textAlign: "center" }}>
[APPLICATION NAME] - Connected Products:
</h1>
</div>
<div class="center-product-content">
<div id="center_connect">
//Here the divs get added to the "states" array after clicking Add on the Modal
{states.map((state, index) => {
return (
<div key={index}>
{state.stateSelect !== "Select Product Type" && state.stateSelect !== "" && (
<div class="app-box" key={index}>
<img
class="image"
alt="Logo"
src="https://st.depositphotos.com/1968353/2535/i/600/depositphotos_25357041-stock-photo-close-up-of-machine-gears.jpg"
/>
<div class="box-content">
<h3 class="product-h3"> {state.state} </h3>
<textarea
class="product-textarea"
placeholder="Short description of Product; max. 280 characters"
readOnly={true}
onChange={(e) => handleComment(e)}
value={state.stateComment}
>
{state.stateComment}
</textarea>
<h3 class="product-h3-second"> Configuration </h3>
<div class="approve-img">
<img
class="product-image"
alt="Icon"
src={Approve}
></img>
</div>
<div
class="button-content new"
id="product-delete-button"
>
<img
class="close_dyn"
alt="Delete"
src={Close}
onClick={() => setOpenDelete(true)}
></img>
</div>
<div class="module-button center_button_dyn">
<button
type="button"
class="btn btn-secondary"
onClick={() => setOpenSettings(true)}
></button>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Configure</span>
</div>
</div>
</div>
</div>
)}
</div>
);
})}
</div>
<div
style={{ cursor: "pointer" }}
class="app-box"
onClick={() => setOpen(true)}
>
<img
class="image"
src={Add}
alt="Add"
style={{ height: "150px", position: "relative", left: "550px" }}
/>
<p
style={{ fontSize: "larger", position: "relative", left: "600px" }}
>
Add Connected Product
</p>
</div>
<div class="module-button" style={{ left: "1340px" }}>
<Link to="/overview">
<button type="button" class="btn btn-secondary"></button>
</Link>
<div class="button-animation"></div>
<div class="button-content">
<span class="content-text">Done</span>
</div>
</div>
</div>
</div>
);
};
export default ConnectedProducts;
ModalDelete.jsx:
import React from "react";
const ModalDelete = ({ setOpen, setOpenSettings, index, states, setStates }) => {
React.useEffect(() => {
function handleEscapeKey(event) {
if (event.code === "Escape") {
setOpen(false);
}
}
document.addEventListener("keydown", handleEscapeKey);
return () => document.removeEventListener("keydown", handleEscapeKey);
});
//Delete Function
const deleteProduct = (index) => {
const copy = [...states];
copy.splice(index, 1);
setStates(copy);
console.log(index)
setOpen(false);
setOpenSettings(false);
}
return(
//HTML shortened up to the responsible button click for the delete function
<button
type="button"
class="btn btn-light btn"
onClick={() => deleteProduct(index)}
></button>)
export default ModalDelete;
ModalAddProduct.jsx: (adds the panel to ConnectedProducts.js)
import React from "react";
const ModalAddProduct = ({ setOpen, setStates }) => {
const [ModalState, setModalState] = React.useState("");
const [ModalStateComment, setModalStateComment] = React.useState("");
const [ModalSelect, setModalSelect] = React.useState("");
React.useEffect(() => {
function handleEscapeKey(event) {
if (event.code === "Escape") {
setOpen(false);
}
}
document.addEventListener("keydown", handleEscapeKey);
return () => document.removeEventListener("keydown", handleEscapeKey);
});
const handleComment = (e) => {
setModalStateComment(e.target.value);
};
const handleChange = (e) => {
setModalState(e.target.value);
};
const handleSelect = (e) => {
setModalSelect(e.target.value);
}
//Function to add new panels
const addNewProduct = () => {
setOpen(false);
setStates( oldArray => [...oldArray, {
state: ModalState,
stateComment: ModalStateComment,
stateSelect: ModalSelect,
}])
};
...
export default ModalAddProduct;
What am I missing to dynamically delete any selected panel? I tried so many different approaches to this, but can't seem to find a working solution.

import uuid from "uuid/v4";
const addNewProduct = () => {
setOpen(false);
setStates( oldArray => [...oldArray, {
state: ModalState,
stateComment: ModalStateComment,
stateSelect: ModalSelect,
id:uuid()
}])
};
//this will add id to each added item
const deleteProduct = (id) => {
"Set Your state"((prevItem) => {
return prevItem.filter((item) => item.id != id);
});
};
//In delete, function it filters the state and check whether the id is there or not
//let me know if it works

Why is the onclick event running 2 different functions

I am trying to run a function by clicking Modify2 or Edit2 in the code.
It runs all the time the function defined with onClick and then showCard again
List section loads
Select an entry of the list, it will run showCard and loads the item.
Clicking on Edit2 or Modify2 triggers showConn and right away showCard again
It should just trigger showConn !
And why is it running showCard right after showConn?
Thanks for any suggestions.
The Code:
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
const [list, setList] = useState(true);
const [card, setCard] = useState(false);
const [netconn, setNetconn] = useState(false);
const [networks, setNetworks] = useState([]);
const [network, setNetwork] = useState({});
useEffect(() => {
fetch(window.location.protocol+"//"+window.location.hostname+":3001/networks/list")
.then((response) => response.json())
.then((responseJson) => {
setNetworks(responseJson.data);
});
}, []);
let showCard = (id) => {
console.log( "Show Card");
fetch(window.location.protocol+`//`+window.location.hostname+`:3001/networks/${id}`)
.then((response) => response.json())
.then((responseJson) => {
setNetwork(responseJson.data);
setList(false);
setNetconn(false);
setCard(true);
});
};
let showConn = (id) => {
console.log( "Show Connection");
setList(false);
setCard(false);
setNetconn(true);
};
let showList = () => {
setCard(false);
setNetconn(false);
setList(true);
};
const handleSubmit = (event) => {
event.preventDefault();
}
const handleGetconn = (event,id) => {
event.preventDefault();
alert(id);
showConn(id)
}
return (
<div className="container">
{netconn ? (
<div className="row">
<div className="col-auto">
<div
onClick={() => showCard(network._id)}
className="btn btn-primary">Submit</div>
<div
onClick={() => showList()}
className="btn btn-default">Cancel</div>
</div>
</div>
) : null}
{list ? (
<div className="list-group">
{networks.map((network) => (
<li
key={network._id}
onClick={() => showCard(network._id)}
className="list-group-item list-group-item-action">
{network.name}
</li>
))}
</div>
) : null}
{card ? (
<div className="row">
<div className="col-auto">
<div
onClick={(e) => handleGetconn(e,network._id)}
className="btn btn-success">
Modify2
</div>
<div onClick={() => showConn(network._id)} className="btn btn-primary">
Edit2
</div>
<div onClick={() => showList()} className="btn btn-default">
Back
</div>
</div>
</div>
) : null}
</div>
);
}
export default App;
UPDATE the code and added () => to onclick tags where it was missing

You are calling the function showCard on every render here:
onClick={showCard(network._id)}
In the code excerpt above, the onClick prop value is the return value of the function call which is called on every render.
The <li> element has the onClick prop set correctly.
onClick={() => showCard(network._id)}
Here, the onClick prop value is a reference to a function which is called on click event.

How to modify react button "More"?

I have the following React component:
import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
function Pokemon({ name, url }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData);
}, [url]);
const onClickButtonChange = () => {
let cardMore = document.querySelector(".card_more");
let cardMain = document.querySelector(".card_main");
cardMore.style.display = "block";
cardMain.style.display = "none";
};
return (
<div>
{data ? (
<div>
<div className="card card_main">
<div className="animate__animated animate__bounceInUp">
<div className="card-image">
<img src={data.sprites.front_default} alt="pokemon_img" />
<span className="card-title">{name}</span>
<button onClick={onClickButtonChange}>More</button>
</div>
<div className="card-content">
{data.abilities.map((n, index) => (
<p key={index}>{n.ability.name}</p>
))}
</div>
</div>
</div>
<div className="card card_more">
<p>{data.height}</p>
<p>{data.weight}</p>
</div>
</div>
) : (
<div>
<TailSpin type="Puff" color="purple" height={100} width={100} />
</div>
)}
</div>
);
}
export { Pokemon };
My implementation of the More button needs to display additional features (the card_more block). Right now this function only works on the very first element. I understand that in React this can most likely be done more correctly, but I don’t know how, so I use CSS styles.
P.S Edited:
I tried to use React features, maybe someone can tell me or does it make sense?
import React from "react";
import { useState, useEffect } from "react";
import { TailSpin } from "react-loader-spinner";
function Pokemon({ name, url }) {
const [data, setData] = useState(null);
const [show, setShow] = useState(false);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData);
}, [url]);
const handleMore = async () => {
if (show === true) {
setShow(false);
} else if (show === false || !data) {
const r = await fetch(url);
const newData = await r.json();
setData(newData);
setShow(true);
}
};
return (
<div>
{data && show ? (
<div>
<div className="card card_main">
<div className="animate__animated animate__bounceInUp">
<div className="card-image">
<img src={data.sprites.front_default} alt="pokemon_img" />
<span className="card-title">{name}</span>
</div>
<div className="card-content">
{data.abilities.map((n, index) => (
<p key={index}>{n.ability.name}</p>
))}
</div>
</div>
<button onClick={handleMore}>More</button>
</div>
<div className="card card_more">
<p>{data.height}</p>
<p>{data.weight}</p>
</div>
</div>
) : (
<div>
<TailSpin type="Puff" color="purple" height={100} width={100} />
</div>
)}
</div>
);
}
export { Pokemon };

Youre right, this isn't the way you should do it in React. But your problem in your onClickButtonChange-Function is that youre only getting one element with document.querySelector(".card_more") and everytime you call it you get the same element back (No matter on which card you call it)
What you need to do is: Identify the single component elements. Thats most likely solved by passing a id/key value down via props and then putting this id on a parent-element (e.g. div.card) and you give it an id:
<div className="card card_main" id={props.keyvalue}>
....
</div>
And then in your onClickButtonChange-Function you call:
let cardMore = document.querySelector(`#${props.keyvalue} .card_more`);
...
This should give you the right element.

How to call useEffect again on button click in react?

I am beginner in react.
I am making a small project. How to add Product in cart and I am stuck at re Rendering useEffect.
so what I want is to re Render the useEffect on button click.
how do I do that?
Here Is my Cart Component
import React, { useContext, useEffect, useState,useCallback } from "react";
import { UserContext } from "./Context";
import { useHistory } from "react-router";
import cartImage from "../assets/man-shopping.png";
import Axios from "axios";
const Cart = () => {
const { user, serUser } = useContext(UserContext);
const history = useHistory();
const [product, setProduct] = useState([]);
const removeFromCart = (item) => {
Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
setProduct(
product.filter((item) => {
return item.Id !== res.data.Id;
})
);
});
};
useEffect(() => {
Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
setProduct(res.data);
});
}, [user]);
return (
<div
className="d-flex align-items-center justify-content-center"
style={{ height: "90vh" }}
>
{user.role === undefined ? (
<div>
<button
className="btn btn-lg btn-primary bg-green"
onClick={() => {
history.push("/login");
}}
>
Please Login
</button>
</div>
) : (
<div>
{product.length === 0 ? (
<figure className="figure">
<img
src={cartImage}
alt="cart"
style={{ width: "100px", height: "100px" }}
/>
<figcaption className="figure-caption text-xs-right">
No Product Added
</figcaption>
</figure>
) : (
<div className="d-flex">
{product.map((item) => {
return (
<div className="card">
<img
src={new Buffer.from(item.pimg).toString("ascii")}
className="img-fluid crd-img"
/>
<div className="card-body">
<h5 className="card-title">{item.pname}</h5>
<p className="card-text">{item.pprice}</p>
<button
className="btn btn-primary"
onClick={() => removeFromCart(item)}
>
Remove
</button>
</div>
</div>
);
})}
</div>
)}
</div>
)}
</div>
);
};
export default Cart;
so I made the removeFromCart function as useEffect dependency so it works fine
but its calls the backend again and again.
const removeFromCart = (item) => {
Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
setProduct(
product.filter((item) => {
return item.Id !== res.data.Id;
})
);
});
};
useEffect(() => {
Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
setProduct(res.data);
});
}, [user,removeFromCart]);
Is there any other way to re render useEffect

Put axios.get in a function.
const getProduct = useCallback(() => {
Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
setProduct(res.data);
});
}, [user]);
const removeFromCart = (item) => {
Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
getProduct();
});
};
useEffect(() => {
getProduct();
}, [getProduct]);

What you need is not useEffect. Use a 'state' to store the items and add or delete items using setState when 'state' gets updated react will automatically re-render. And you can use the updated state to save in your database. Also update state before calling axios

You can add a boolean state like this :
const [isClicked, setIsCliked] = useState(false);
And toogle the boolean value whenever the button is clicked
const removeFromCart = (item) => {
Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
setProduct(
product.filter((item) => {
return item.Id !== res.data.Id;
})
);
setIsCliked(bool => !bool)
});
};
And your useEffect may now look like this :
useEffect(() => {
Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
setProduct(res.data);
});
}, [user.id,isClicked]);
There must be a better way but this should work

How to re-fetch data after doing a filter in React.js with useContext

I got this component in React.js which make different kinds of filtering when I click a button, this is my code:
import React, { useContext } from 'react';
import { ModelsContext } from "../context/ModelsContext";
const FilterNav = () => {
const { modelos, guardarModelo } = useContext(ModelsContext);
const filterSegment = e => {
const segment = modelos.filter(modelo => modelo.segment === e.target.name);
guardarModelo(segment);
}
return (
<nav className="filter-container">
<div className="container">
<h3 className="filter-element-title">Filtrar por</h3>
<button type="button" className="filter-element">Todos</button>
<button type="button" className="filter-element" name="Autos" onClick={filterSegment}>Autos</button>
<button type="button" className="filter-element" name="Pickups y Comerciales" onClick={filterSegment}>Pickups y Comerciales</button>
<button type="button" className="filter-element" name="SUVs y Crossovers" onClick={filterSegment}>SUVs y Crossovers</button>
</div>
<p className="filter-element-last">Ordenar por ^</p>
</nav>
);
}
export default FilterNav;
The information I get from the api with useContext in ModelsContext.jsx, here is what I wrote so far:
import React, { createContext, useState, useEffect } from 'react';
export const ModelsContext = createContext();
const ModelsProvider = (props) => {
//State de modelos
const [modelos, guardarModelo] = useState([]);
const consultarAPI = async () => {
const api = await fetch("https://challenge.agenciaego.tech/models");
const modelos = await api.json();
guardarModelo(modelos);
}
//Cargar un modelo
useEffect(() => {
consultarAPI()
}, []);
return (
<ModelsContext.Provider
value={{
modelos,
guardarModelo
}}
>
{props.children}
</ModelsContext.Provider>
)
}
export default ModelsProvider;
My issue is that when I filter the API modelos throught the filterSegment function I don't know how to re-fetch the data from the API, because when I do a new call to the filterSegment function it filters the filtered data. I've tried to add a boolean state, and I was thinking about adding another state with allthedata, but I really lost about implementing it, I'm still very new to React.js.
I've search through stack overflow and google and I cannot get the answer, If you can give me a clue or some sort of guidance it will be appreciated.
Thanks so much!

You can add another state in the ModelsContext:
//State de modelos
const [modelos, guardarModelo] = useState([]);
const [allModelos, guardarAllModelo] = useState([]);
const consultarAPI = async () => {
const api = await fetch("https://challenge.agenciaego.tech/models");
const modelos = await api.json();
guardarAllModelo(modelos);
//uncomment if you want to have initial value for modelos state
//guardarModelo(modelos);
}
// some codes ...
<ModelsContext.Provider
value={{
allModelos,
modelos,
guardarModelo
}}
>
{props.children}
</ModelsContext.Provider>
Then in the FilterNav component:
const {allModelos, modelos, guardarModelo } = useContext(ModelsContext);
const filterSegment = e => {
const segment = allModelos.filter(modelo => modelo.segment === e.target.name);
guardarModelo(segment);
}
But this does not really re-fetch data from your web api. It just re-filters the first fetched data. if you want to re-fetch data from web api you can add consultarAPI in your context provider then call it somewhere.

Thanks code is working
This is my Portfolio gallery code First time load all data when click category then get category dataenter code here
Thanks code is working
This is my Portfolio gallery code First time load all data when click category then get category data`enter code here`
import React, { Component, useEffect, useState } from 'react'`enter code here`;
import Thumnailport_list from './Thumnailport_list';
import Portlightbox from './Portlightbox';
import Functional from './Functional';
import $ from 'jquery';
const Portfolio = () => {
const filterItem = async (categoryitem) => {
const updateitmes = allModelos.filter((curElm) => {
return curElm.categories === categoryitem
})
getporfolioState(updateitmes)
}
const [getporfolio, getporfolioState] = useState([])
const [allModelos, guardarAllModelo] = useState([]);
$(document).ready(function () {
$(".grid-wrap .grid li").unbind().click(function (e) {
console.log(this.className);
var newe = this.className;
$('.' + newe).addClass('current show');
$("#grid-gallery").addClass("slideshow-open");
});
$("#closeport").unbind().click(function (e) {
$("#grid-gallery").removeClass("slideshow-open");
$(".portfolio .grid li").removeClass('current show');
$(".portfolio .slideshow ul > li").removeClass('current show');
});
});
const portadd = () => {
document.body.classList.add('portfolio');
document.body.classList.add('at-top');
document.getElementById('port').classList.add('no-transform');
document.getElementById('port').classList.add('revealator-within');
document.getElementById('port2').classList.add('no-transform');
document.getElementById('port2').classList.add('revealator-within');
document.getElementById('navbar-collapse-toggle').classList.remove('biohidemenu');
}
const getalldata = async () => {
try {
const res = await fetch("/getdata", {
method: 'Get',
headers: {
'Content-Type': 'application/json'
}
})
const data = await res.json()
// console.log("This is our data load")
// console.log(data.portfolio)
getporfolioState(data.portfolio)
guardarAllModelo(data.portfolio)
} catch (error) {
console.log(error)
// history.push("/backoffice/login")
}
}
useEffect(() => {
getalldata()
portadd()
}, []);
return (
<>
<section id="port" class="title-section text-left text-sm-center revealator-slideup revealator-once revealator-delay1">
<h1 >my <span>portfolio</span></h1>
<span class="title-bg">works</span>
</section>
<section id="port2" className="main-content text-center revealator-slideup revealator-once revealator-delay1">
<div class="container">
<button className="btn btn-about " onClick={() => filterItem('mobileapp')}>Mobile</button>
<button className="btn btn-about " onClick={() => filterItem('frontend')}>Frontend</button>
<button className="btn btn-about " onClick={() => filterItem('gdesign')}>Graphics</button>
</div>
<div id="grid-gallery" className="container grid-gallery">
{/* Portfolio Grid Starts */}
<section className="grid-wrap">
<ul className="row grid">
{
getporfolio.map((getdata, index) => {
return (
<>
<Thumnailport_list
key={index}
portID={getdata._id}
imagetag={getdata.imguploadedFile}
figuertext={getdata.projectname}
/>
</>
)
})
}
</ul>
</section>
{/* Portfolio Grid Ends */}
{/* Portfolio Details Starts */}
<section className="slideshow" id="sdfer">
<ul>
{/* Portfolio Item Detail Starts */}
{
getporfolio.map((getdata, index) => {
return (
<>
<Portlightbox
idlight={getdata._id}
imagelight={getdata.imguploadedFile}
langport={getdata.language}
clientport={getdata.client}
projectnameport={getdata.projectname}
previewport={getdata.preview}
/>
</>
)
})
}
</ul>
{/* Portfolio Navigation Starts */}
<nav>
{/*<span className="icon nav-prev prev"><img src="images/left-arrow.png" alt="previous" /></span>
<span className="icon nav-next next"><img src="images/right-arrow.png" alt="next" /></span>*/}
<span className="nav-close" id="closeport"><img src="images/close-button.png" alt="close" /> </span>
</nav>
{/* Portfolio Navigation Ends */}
</section>
</div>
</section>
</>
)
}
export default Portfolio;