Update the state of an object element in React

Question

i'm working on a react project and I have an object in array I have set the initial state to

input: [
{item:'', label :'', codeBlock:''}
  ],

on an onClick event, i set the state of the values of the elements in the javaSript object and push them into the input array with the code below

Text(){

 const input = this.state.input;
 const item = <input type="text" placeholder="Enter text here!" 
className="InputDiv" onChange={this.handleTextChange.bind(this)}/>
 const codeBlock = <input type="text" placeholder="Enter text here!" 
 className="InputDiv"/>;
const label = this.state.label;
this.setState({input : input.concat({item, label, codeBlock})});
console.log(this.state.input)




}

Now i am trying to update the value of the label element on an onChange event, handleTextChange. What i mean is for the current state, on an onChange event, set just the value of the label and update the state.

Please how will i do this in React?

Thanks

We can't help you without seeing your code. You'll need to have a way of identifying which label to update (since you have an array), which presumably you do have in your code. Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Jun 12, 2018 at 8:04
The problem is that you have an array with an object as state, and we don't know which element in the array you want to update. So if I understand your text I would do like this on the onClick event = onClick={ () => this.setState({input[0].label: 'your-value' })} — MstrQKN
– MstrQKN, Commented Jun 12, 2018 at 8:05

Mario Rozic · Accepted Answer · 2018-06-12 08:43:53Z

Here try something like this...

class TodoApp extends React.Component {

  state = {
        input: [],
        currentItem: '',
        currentLabel: '',
        urrentCodeBlock: ''
  }

  handleInput = (e, label) => {
    // filling out currentState of your inputs
    this.setState({[label]: e.target.value})
  }
  
  clickHandler = () => {
    // creating copy of old array of inputs
    const newArr = [...this.state.input];
    // creating new Object that u defined
    const newObj = {
    	item: this.state.currentItem,
      label: this.state.currentLabel,
    	codeBlock: this.state.currentCodeBlock,
    }
    
    // pushing your new Obj to copy of old array
    newArr.push(newObj);
    
    // updateing state and setting input values to ''
    this.setState({
    	input: newArr,
      currentItem: '',
      currentLabel: '',
      currentCodeBlock: ''
    })
  }
  
  render() {
    let InputList = this.state.input.map((input, index) => (
    	<li key={index}> {input.item} - {input.label} - {input.codeBlock}</li>
    ))
    return (
      <div>
          <input type="text" placeholder="Item" value={this.state.currentItem} onChange={(e) => this.handleInput(e, 'currentItem')} />
          <input type="text" placeholder="Label" value={this.state.currentLabel} onChange={(e) => this.handleInput(e, 'currentLabel')} />
          <input type="text" placeholder="CodeBlock" value={this.state.currentCodeBlock} onChange={(e) => this.handleInput(e, 'currentCodeBlock')} />
          <button onClick={this.clickHandler}>SAVE</button>
          <hr/>
          <ul>
            {InputList}
          </ul>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<div id="app"></div>
<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>

Rohith Murali · Accepted Answer · 2018-06-12 08:16:08Z

0

If your state object is an array, you will have to pick the correct object from the index, create a duplicate object and assign the new value and then set the state with the new value.

updateLabel=(text, index)=>{
 let allInputs = [...this.state.input];
 let selectedInput = {...allInputs[index]};
 selectedInput.label = text;
 allInputs[index] = selectedInput;
 this.setState({input:allInputs});
}

answered Jun 12, 2018 at 8:16

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Collectives™ on Stack Overflow

Update the state of an object element in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related