Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a new key value to react js state array?

I want to add new key value to array ınto state? I tell you what I want to do below. How can I do that? 1. Start state in consruture method

`this.state = {
    files: []
}'
  1. After I doing set state with active files

    this.setState({files: activeFiles})

  2. Screen my state

    { files: [ { key1: val1, key2: val2, key3: val3 }, { key1: val1, key2: val2, key3: val3 }, { key1: val1, key2: val2, key3: val3 } ] }

  3. How to add new key value for each file? The state I want

    { files: [ { key1: val1, key2: val2, key3: val3, key4: val4 }, { key1: val1, key2: val2, key3: val3, key4: val4 }, { key1: val1, key2: val2, key3: val3, key4: val4 } ] }

like image 909
ahmet Avatar asked Jan 12 '17 09:01

ahmet


People also ask

How add key value pair in array React?

You create your object (including its id property) and then you add it to the result array. You add the id property to the last object in your result array (since you talk about "newly created data" I am assuming it is always the last item).

How do you update an array in state React?

To update an array of objects state in React: Use the map() method to iterate over the array. On each iteration, check if a certain condition is met. Update the properties of the object that matches the condition.

How do you update state value in React?

If you want to get the updated value of the state immediately after the setState call, you can pass a function as the second argument to the setState call which will be executed once the state is updated.


2 Answers

I think This will meet the above scenario.

const newFile = this.state.files.map((file) => {

    return {...file, key4: val4};
});
this.setState({files: newFile });
like image 190
duwalanise Avatar answered Sep 23 '22 17:09

duwalanise


You can make use of forEach and add the new value like

var newState = [...this.state.files];
newState.forEach(function(file) {
  file.key4 = "val4"
})
this.setState({files: newState}, function() {
  console.log(this.state.files);
})

Fiddle

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        files: 
        [
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            },
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            },
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            }
        ]
    }
  }
  componentDidMount() {
    console.log(this.state.files) ;
    
    var newState = [...this.state.files];
    newState.forEach(function(file) {
      file.key4 = "val4"
    })
    this.setState({files: newState}, function() {
      console.log(this.state.files);
    })
  }
  render() {
    return <div>Hello</div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
like image 41
Shubham Khatri Avatar answered Sep 23 '22 17:09

Shubham Khatri