How to force re render when an array changes its value in ReactJS

Question

How to force re-render when an array changes its value in ReactJS.

I have an array like

const [providers, setProviders] = useState<Array<any>>(props.filters?.providers!);

and when I call a delete function to remove one element of this array the view doesn't render.

let OnDelete = (prop: any, func: any, p: IFilter) => {
    const index = prop.findIndex((x: IFilter) => x.code == p.code);
    if (index !== -1) {
        prop.splice(index, 1);
    }
    func(prop);
};

Have you tried setProviders within the delete to see if that helps? — jsN00b
– jsN00b, Commented Feb 10, 2022 at 16:10
Just create a new array. It expects a new reference setProviders [...providers] /* or */ setProviders(Array.from(providers)) — Ruan Mendes
– Ruan Mendes, Commented Feb 10, 2022 at 18:48

user18172972 · Accepted Answer · 2022-02-10 16:18:34Z

2

I've a workaraund when I want the page to render againg when using hooks that works for me.

I Just declare a state and then change its value to force re-render, something like this

const [providers, setProviders] = useState<Array<any>>(props.filters?.providers!);
const [refresh, setRefresh] = useState<boolean>(false);

const OnDelete = (prop: any, func: any, p: IFilter) => {
    const index = prop.findIndex((x: IFilter) => x.code == p.code);
    if (index !== -1) {
        prop.splice(index, 1);
    }
    func(prop);
    setRefresh(!refresh) //**Here i force a re render when changing th state**
}

I hope it works for you :)

answered Feb 10, 2022 at 16:18

user18172972

361 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Ruan Mendes Over a year ago

There's really no need for another hook call

Collectives™ on Stack Overflow

How to force re render when an array changes its value in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related