Develop Reference

How to delete all dynamically generated elements at once in a antd Form

If we have a component like this and we want to remove all generated elements at once (like reset the form elemets) how can i achive this by not removing elements from the DOM? The best approach should be to manipulate the "fields" directly, but how can we achive that?
import React, { useState, useContext } from 'react';
import { PlusOutlined, MinusOutlined } from '#ant-design/icons';
import { Button, Form } from 'antd';
const App = () => {
const [form] = Form.useForm();
const removeQuery = (event, key) => {
//How to remove all fields in fields?
};
return (
<Form
form={form}
name="dynamic_form_nest_item"
autoComplete="off"
preserve={false}
>
<Form.List name="filterattribute">
{(fields, { add, remove }) => (
<div>
<div>
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
icon={<PlusOutlined />}
size="large"
>
Add Element
</Button>
</Form.Item>
</div>
<div className="greybg" style={{ padding: '6px 0px 8px' }}>
{fields.map(({ key, name, ...restField }) => (
<div
key={key}
style={{
display: 'flex',
marginTop: 0,
justifyContent: 'center',
}}
>
<MinusOutlined
key={key}
style={{ margin: '5px 15px -4px 0px', cursor: 'pointer' }}
onClick={(e) => {
remove(name);
removeQuery(e, key);
}}
/>
Element
</div>
))}
</div>
</div>
)}
</Form.List>
</Form>
);
};
export default App;
Here's a working example in Stackblitz:
https://stackblitz.com/edit/react-ts-a8fmfb?file=App.tsx

TypeError: sigCanvasRef.getTrimmedCanvas is not a function

I get the error above when using getTrimmedCanvas.
I read that when using a background style this error occurs because it needs a white background or something like that.
Theres more code but i only pasted the relevant stuff.
Thank you for helping!
import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
export default function Homepage() {
const sigCanvasRef = useRef({});
const clear = () => sigCanvasRef.current.clear();
const save = () =>
console.log(sigCanvasRef.getTrimmedCanvas().toDataURL("image/png"))
return(
<Popup modal trigger={<Button style={{ maxWidth: '40px', maxHeight: '40px', minWidth: '40px', minHeight: '40px' }} color="inherit">
<CreateIcon />
</Button>}
closeOnDocumentClick={false}
>
{close => (
<>
<div className={sigCanvas.signatureCanvas} >
<SignaturePad
ref={sigCanvasRef}
canvasProps={
{
style: {background: 'white', width:'100%', minHeight:'650%'}
}
} />
</div>
<Button variant="contained" onClick={close}>back</Button>
<Button variant="contained" onClick={clear}>clear</Button>
<Button variant="contained" onClick={save}>save</Button>
</>
)}
</Popup>
)

You access refs by the current-property.
Try this
console.log(sigCanvasRef.current.getTrimmedCanvas().toDataURL("image/png"))

Select only a card at a time on click in reactjs

I have a react component which has some cards, When I click the plus icon in the card, it would expand and show some data for 30sec and then the data will disappear and on click it will reappear again, here is the component
import React from "react";
import { FaPlus } from "react-icons/fa";
import useTimeout from "../../../common/useTimeout";
import { Modal } from "../../../common/Modal";
import { ToggleState } from "../../../common/Toggle";
import { BsSearch } from "react-icons/bs";
import AdvancedFilter from "./AdvancedFilter";
export default function CitiesList({ cities }: { cities: any }): JSX.Element {
const [filter, setFilter] = React.useState("");
const [sortType, setSortType] = React.useState("");
const [selectedCity, setSelectedCity] = React.useState<any | null>(null);
console.log(filter);
const sorted = cities.sort((a: { name: string }, b: { name: any }) => {
const isReversed = sortType === "asc" ? 1 : -1;
return isReversed * a.name.localeCompare(b.name);
});
const onSort = (sortType: React.SetStateAction<string>) => {
console.log("changed");
setSortType(sortType);
};
const [showMeta, setShowMeta] = React.useState(false);
const handleClick = () => setShowMeta(true);
const getSelectedCity = (selectedCity: any) => {
setSelectedCity(selectedCity);
console.log("SELECTED CITY", selectedCity);
};
const [visible, setVisible] = React.useState(true);
const hide = () => setVisible(false);
useTimeout(hide, 30000);
console.log("CITIES", cities);
console.log({ selectedCity });
return (
<div style={{ marginTop: "3rem" }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
}}
>
<div>List of cities</div>
<div style={{ display: "flex", alignItems: "center" }}>
<div style={{ marginRight: "1rem" }}>
<ToggleState
render={({ isOpen, open, close }) => {
return (
<>
<button
type="button"
className="btn btn-primary"
onClick={() => {
isOpen ? close() : open();
}}
>
Advanced Filter
</button>
<Modal
isActive={isOpen}
modalContentWidth={"30%"}
header={() => "Advanced Filter"}
close={() => close()}
renderBody={() => {
return <AdvancedFilter close={() => close()} />;
}}
></Modal>
</>
);
}}
/>
</div>
<div style={{ position: "relative", marginRight: "1rem" }}>
<input
type="text"
placeholder="Filter"
name="namePrefix"
style={{ padding: "0.35rem" }}
onChange={(e: any) => {
setFilter(e.target.value);
}}
/>
<div style={{ position: "absolute", top: "5px", right: "5px" }}>
<BsSearch size="16" />
</div>
</div>
<div style={{ width: "8rem" }}>
<div className="btn-group">
<button
type="button"
className="btn dropdown-toggle sort-button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{sortType === "asc"
? "Ascending"
: sortType === "desc"
? "Descending"
: "Select"}
</button>
<ul className="dropdown-menu sort-button">
<li>
<button
className="dropdown-item"
type="button"
onClick={() => onSort("asc")}
>
Ascending
</button>
</li>
<li>
<button
className="dropdown-item"
type="button"
onClick={() => onSort("desc")}
>
Descending
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div>
<div className="row">
{cities &&
sorted.map((item: any, index: number) => (
<div className="col-lg-3" key={index}>
<div
className="card"
style={{
textAlign: "center",
display: "flex",
justifyContent: "center",
paddingBottom: "1rem",
marginBottom: "1rem",
marginRight: "1rem",
}}
>
<div className="card-body">
<h5 className="card-title">{item.name}</h5>
</div>
{visible && showMeta ? (
<div>
<p>Longitude: {item.longitude}</p>
<p>Latitude: {item.latitude}</p>
<p>Population: {item.population}</p>
{/* <p>Time Zone: America</p> */}
</div>
) : (
<div
onClick={() => {
handleClick();
getSelectedCity(item.id);
}}
style={{ cursor: "pointer" }}
>
<FaPlus size="18" />
</div>
)}
</div>
</div>
))}
</div>
</div>
</div>
<div
style={{ marginTop: "30px", display: "flex", justifyContent: "center" }}
>
{cities && cities.length > 10 ? (
<button className="secondary-button">Load More</button>
) : (
<p>There are no more cities</p>
)}
</div>
</div>
);
}
here is the useTimeout function
import { useEffect, useRef } from "react";
function useTimeout(callback: () => void, delay: number | null) {
const savedCallback = useRef(callback);
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
if (delay === null) {
return;
}
const id = setTimeout(() => savedCallback.current(), delay);
return () => clearTimeout(id);
}, [delay]);
}
export default useTimeout;
Now currently if I click on one card, all the cards opens and also after when the data disappears after 30sec it does not reappear on button click. I need to reload the page to do reappear data again.I need to solve 2 issues here: 1. how can I open one card only at a time on clicking on the icon, 2. how can I reappear data on button click without refreshing the page.

As I understand you, some information is
<p>Longitude: {item.longitude}</p>
<p>Latitude: {item.latitude}</p>
<p>Population: {item.population}</p>
You have global statement of showing this info for all cards. To reduce it, make new component which will have local state of this info:
import React from 'react'
const timeout = 15000
export const CityCard = ({item, visible, getSelectedCity}) => {
const [showMeta, setShowMeta] = React.useState(false)
const handleClick = React.useCallback(()=>{
setShowMeta(true)
setTimeout(()=>{
setShowMeta(false)
},timeout )
}, [showMeta])
return(
<div className="col-lg-3" key={index}>
<div
className="card"
style={{
textAlign: "center",
display: "flex",
justifyContent: "center",
paddingBottom: "1rem",
marginBottom: "1rem",
marginRight: "1rem",
}}
>
<div className="card-body">
<h5 className="card-title">{item.name}</h5>
</div>
{visible && showMeta ? (
<div>
<p>Longitude: {item.longitude}</p>
<p>Latitude: {item.latitude}</p>
<p>Population: {item.population}</p>
{/* <p>Time Zone: America</p> */}
</div>
) : (
<button
onClick={() => {
handleClick();
getSelectedCity(item.id);
}}
type='button'
disabled={showMeta}
style={{ cursor: "pointer" }}
>
<FaPlus size="18" />
</button>
)}
</div>
</div>
)
}
At the end, add this component to the CityList

Scroll to the bottom of a scrollable div in react

I've tried numerous solutions to try scroll to the bottom of a div as at the bottom user feedback can be found on whether their registration form successfully submitted.
var objDiv = document.getElementById("form");
objDiv.scrollTop = objDiv.scrollHeight;
and
window.scrollTo(0,document.body.scrollHeight);
and
window.scrollTo(0,document.querySelector("#form").scrollHeight);
With no success
Here's the react code for the form
return (
<div
className={styles.register_container}
id="register-container"
style={{
height: "100%",
overflow: "scroll",
}}
>
<HomeIcon />
<div className={styles.login_button_container}>
<p>Already have an account? </p>
<button
onClick={() => {
router.push("/login");
}}
>
Log in
</button>
</div>
<div
style={{
padding: "60px 0",
height: "100%",
maxWidth: "300px",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
id="form"
>
<img
src="/assets/Logo/ROA_logowhite.png"
style={{
height: "100px",
maxWidth: "100px",
}}
onClick={() => {
var objDiv = document.getElementById("form");
objDiv.scrollTop = objDiv.scrollHeight;
}}
/>
{page === 2 && (
<div style={{ width: "100%" }}>
<button className="back-button" onClick={backButtonHandler}>
<FontAwesomeIcon icon={faAngleLeft} />
Back
</button>
</div>
)}
{page === 1 && loginDetails}
{page === 2 && personalDetails}
<div style={{ width: "100%", padding: "5px 0" }}>
<button
className="form-button"
onClick={buttonHandler}
style={{ minHeight: "50px" }}
>
{submitButton}
</button>
</div>
{loading && (
<div
style={{
padding: "5px",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ReactLoading
type="spin"
color="#1dd760"
height={50}
width={50}
id="loader"
/>
</div>
)}
{registrationError && (
<p className="form-submit-error">
Registration error, refresh your page and try again
</p>
)}
{true && (
<div>
<p
style={{ marginBottom: "10px" }}
className="form-submit"
id="submit"
>
Redirecting to login ... You should receive a welcome email, if
not please try registering again or visit the{" "}
<a href="/contact" style={{ color: "#1dd760" }}>
contact
</a>{" "}
page.
</p>
</div>
)}
</div>
</div>
);
I can't directly focus on the submit success message as setState is asynchronous in react. Just need a function that allows me to scroll the bottom of the div when the next/submit button is clicked

The proper way to access/modify DOM elements in React function components is to use the useRef hook.
https://reactjs.org/docs/hooks-reference.html#useref
Here is an example how you can solve your problem:
import * as React from "react";
const Component: React.FunctionComponent = () => {
const ref = React.useRef<HTMLDivElement>(null);
const [success, updateSuccess] = React.useState(false);
const buttonHandler = () => {
updateSuccess(true);
if (ref.current) {
const offsetBottom = ref.current.offsetTop + ref.current.offsetHeight;
window.scrollTo({ top: offsetBottom });
}
};
return (
<div>
...
<button onClick={buttonHandler}>Scroll</button>
{success ? (
<div
ref={ref}
style={{ height: "2000px", display: !success && "none" }}
>
Long Success Message
</div>
) : null}
</div>
);
};
export default Component;

React - how to apply local storage for hook value

I use the react-range package for personal purposes of my project, the problem is that I cannot save the value when the page is refreshed, I tried to use the local storage but I could not
As you understand, I need to save the value using local storage, in addition, I will leave a link to mine on codesandbox link
SideBarBlurChange.jsx
import React, {useEffect, useState} from "react";
import {getTrackBackground, Range} from "react-range";
const STEP = 0.1;
const MIN = 0;
const MAX = 100;
export default function SideBarBlurChange(props) {
const [values, SetValues] = useState([20])
const SaveChanges = () => {
alert(values)
}
return (
<>
<div
style={{
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
}}
>
<Range
values={values}
step={STEP}
min={MIN}
max={MAX}
onChange={(values) => SetValues(values)}
renderTrack={({ props, children }) => (
<div
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}
style={{
...props.style,
height: "36px",
display: "flex",
width: "100%"
}}
>
<div
ref={props.ref}
style={{
height: "5px",
width: "100%",
borderRadius: "4px",
background: getTrackBackground({
values: values,
colors: ["#548BF4", "#ccc"],
min: MIN,
max: MAX
}),
alignSelf: "center"
}}
>
{children}
</div>
</div>
)}
renderThumb={({ props, isDragged }) => (
<div
{...props}
style={{
...props.style,
height: "42px",
width: "42px",
borderRadius: "4px",
backgroundColor: "#FFF",
display: "flex",
justifyContent: "center",
alignItems: "center",
boxShadow: "0px 2px 6px #AAA"
}}
>
<div
style={{
height: "16px",
width: "5px",
backgroundColor: isDragged ? "#548BF4" : "#CCC"
}}
/>
</div>
)}
/>
<output style={{ marginTop: "30px" }} id="output">
{values[0].toFixed(1)}
</output>
<button onClick={() => SaveChanges()}>Save</button>
</div>
</>
);
}

I think your main problem was that localStorage doesn't store anything besides strings. You're going to want to parseInt then check to make sure localStorage isn't null. Can you try this and see if it works?
const ls = parseInt(window.localStorage.getItem('values'));
const [values, SetValues] = useState(ls ? [ls] : [20]);
const SaveChanges = () => {
alert(values);
localStorage.setItem('values', values);
}