CODEWITHSUNDEEP
reactjs
Parameswar
Parameswar

Reputation: 2069

Assign a key value to a state in React

I have a react app in which i need to push new key values (values can be arrays) to a key in state.

this.state = {
    keyValue: {}
}

Visualising it will be something like this:

keyValue:{'key1':[value1],'key2':[value2,value3]}

How do i do this in react ?i tried:

const newKeyvalue = Object.keys(state.keyValue).map((keyValues) => { return {...keyValue, key: value};}); this.setState({keyValue: newKeyvalue}); But this does not work

Upvotes: 0

Views: 13659

Answers (4)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

Here is an example on how to dynamically add new key-value pairs to the object in your state.

See sandbox: https://codesandbox.io/s/create-arrays-of-n-length-and-editable-d9b3h

Additionally, I've provided a way for you to modify an existing key-value pair to update its own array. You can change up the new-value logic to your needs, in your case you probably want to push a new object instead of generating an array of N length.

class App extends React.Component {
  state = {
    keyValue: {},
    newKey: "",
    newValue: "",
    edittingKey: {}
  };

  createNewKeyValuePair = () => {
    const { keyValue, newKey, newValue } = this.state;

    const newPair = { [newKey]: Array.from(Array(parseInt(newValue)).keys()) };

    this.setState(
      {
        keyValue: { ...keyValue, ...newPair },
        newKey: "",
        newValue: ""
      },
      () => console.log(this.state.keyValue)
    );
  };

  handleOnChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleOnClick = key => {
    const { keyValue } = this.state;
    this.setState({
      edittingKey: { [key]: keyValue[key] }
    });
  };

  handleEdit = e => {
    this.setState({
      edittingKey: {
        [e.target.name]: Array.from(Array(parseInt(e.target.value)).keys())
      }
    });
  };

  completeEdit = () => {
    const { keyValue, edittingKey } = this.state;
    this.setState(
      {
        edittingKey: {},
        keyValue: { ...keyValue, ...edittingKey }
      },
      () => console.log(this.state.keyValue)
    );
  };

  createKeyValuePairList = () => {
    const { keyValue, edittingKey } = this.state;

    const list = Object.entries(keyValue).map(([key, value]) => {
      if (Object.keys(edittingKey).includes(key)) {
        return (
          <div>
            <label>{key}</label>
            <input
              placeholder="change number"
              value={edittingKey[key].length}
              onChange={this.handleEdit}
              name={key}
            />
            <button onClick={this.completeEdit}>Complete</button>
          </div>
        );
      } else {
        return (
          <li>
            {key} : {value.length}
            <button onClick={() => this.handleOnClick(key)}>Edit</button>
          </li>
        );
      }
    });

    return (
      <div>
        {list.length > 0 ? (
          <div>
            Click to edit array number <ul>{list}</ul>
          </div>
        ) : (
          ""
        )}
      </div>
    );
  };

  render() {
    return (
      <div>
        <div>
          <label>KeyName</label>
          <input
            name="newKey"
            value={this.state.newKey}
            onChange={this.handleOnChange}
          />
        </div>
        <div>
          <label>Number of Items</label>
          <input
            name="newValue"
            value={this.state.newValue}
            onChange={this.handleOnChange}
          />
        </div>
        <button onClick={this.createNewKeyValuePair}>Add</button>
        <div>{this.createKeyValuePairList()}</div>
      </div>
    );
  }
}

Upvotes: 4

nerepla
nerepla

Reputation: 31

I'm using like this

obj = []
obj.push({ value: i, label:data[i].api_keys_id })

result:

[
  { value: 1, label: 154 },
  { value: 2, label: 545 }
]

if you want to key name dynamic you can wrap with [] and then set

obj = []
myKeyName="value"
obj.push({ [myKeyName]: i, label:data[i].api_keys_id })

Upvotes: 0

Jitesh Manglani
Jitesh Manglani

Reputation: 485

You can do this by following statement.

  

  const obj = {'keyValue':{'key1':[1],'key2':[2, 3]}}
  const newKeyValue = Object.assign({}, obj.keyValue, {"key3":[6,7], "key2": [...obj.keyValue.key2, 8]})
  console.log(newKeyValue);

Upvotes: -1

karthikdivi
karthikdivi

Reputation: 3633

keyValue is a dynamic variable? They try the following 

this.setState({[keyValue]: newKeyvalue});

Upvotes: 2

Related Questions