Re-render array of child components in React after editing the array

Question

I have data in parent's component state like this:

data=[
            {key:0,name="abc",value="123"},
            {key:1,name="def",value="456"},
            {key:2,name="ghi",value="789"}
     ]

In my react component I am calling child components as list in the return part of the parent component as shown below.

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {

  return(
    {
      this.state.data.map((record,index) => 
             <Child key={record.key}
              id={record.key}
              name={record.name}
              value={record.value}
              onDelete={this.deleteFromStateArray} />
    }
  )
  }

I am calling onDelete() in the child component like this <button onClick={this.props.onDelete(this.state.id)} /> \\ I am initializing id as key in state inside constructor in child

My problem is when I am calling onDelete in the child class I am able to remove the obj with key=1 properly in the function but rerendering is not happening properly.

What I mean is state is getting set properly with only 2 items in data 1 with key=0 and other with key=2. But what i see in GUI is 2 child components 1 with key 0 and second one with key=1 which is cxurrently not present in the state data.

Can anybody help me with re-rendering the data properly?

I also want to change the key ordering after deleting from array in setState

Community · Accepted Answer · 2018-06-21 02:14:44Z

1

React uses key to work out if elements in the collection need to be re-rendered. Keys should be unique and constant. In your method you are changing key property of your records and this probably leads to described error.

Also, you can replace all your code with simple filter call like this:

this.setState(oldState => ({ 
    record: {
        ...oldState.record, 
        { 
            data: oldState.record.data.filter(item => item.key !== key)
        }
    }
});

It is also worth mentioning that you should keep your state as flat as possible to simplify required logic. In your case removing record and and leaving it as below would be a good idea:

this.state = {
    name: "",
    timestamp: "",
    data: [
      {key:0,name: "abc",value: "123"},
      {key:1,name: "def",value: "456"},
      {key:2,name: "ghi",value: "789"}
    ]
}

edited Jun 21, 2018 at 2:14

CommunityBot

11 silver badge

answered Jan 20, 2018 at 15:49

pwolaq

6,41221 silver badges45 bronze badges

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

3 Comments

DadyByte Over a year ago

what is this syntax. can i get detailed info on what it is doing as i am new to react

pwolaq Over a year ago

ok, so instead of creating new array by` map` & push as you did I just used filter; then I modified your setState a bit to ensure it works on current state - more info here: reactjs.org/docs/react-component.html#setstate

DadyByte Over a year ago

will this syntax set state work only in JS file (mine is JSX) because i am getting error in visual studio code like [js] Property assignment expected.

DadyByte · Accepted Answer · 2018-01-20 16:13:39Z

0

I'm not certain if this actually worked for you but the function declaration for deleteFromStateArray is inside the render function.

I think your component should look like this:

class MyApp extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {
    return(
      {
        this.state.record.data.map((record,index) => 
          <Child key={record.key}
            id={record.key}
            onDelete={this.deleteFromStateArray} />
      }
    )
  }
}

edited Jan 20, 2018 at 16:13

DadyByte

9147 gold badges18 silver badges31 bronze badges

answered Jan 20, 2018 at 11:18

JD Hernandez

1,9251 gold badge22 silver badges30 bronze badges

4 Comments

DadyByte Over a year ago

my bad the implemented way is like that only. I will correct my that in my question. But the problem remains the same

JD Hernandez Over a year ago

There must be something wrong with how you are removing the data. If you could add that piece of code then I can help you further.

DadyByte Over a year ago

sure, 1 minute.

DadyByte Over a year ago

i have added the same, but using react chrome extn i am sure the logic is working as i can see the data array in state after delete has happened.

Timothy Gonzalez · Accepted Answer · 2023-02-06 17:02:22Z

0

You can use a built-in set function provided by react with state. See below for an example:

import { useState } from 'react';
const [data, setData ] = useState([]);
fetch('https://localhost:5001/getdata')
    .then((response) => response.json())
    .then((data) => setData(data)) // Example setData usage
    .catch((error) => alert)

answered Feb 6, 2023 at 17:02

Timothy Gonzalez

8089 silver badges9 bronze badges

Collectives™ on Stack Overflow

Re-render array of child components in React after editing the array

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related