creating an empty state object that has a key value array with JSON objects as the values and than changing those json objects

Question

I am attempting to create a reactJS state that has an empty array in it on construction. Once i receive a message, that is a JSON object, I would want to create a key in that array and store that received message as the value under that key.

for example. I have

array x =[]

JSON_obj = {"data":"mydata"}

in normal javascript I could say

x["some_key"] = JSON_obj

I am attempting accomplish this in reactJS inside the state.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cusipData: []
    };

    this.socket = io("adresss");

    this.socket.on("ringBuffer", function(data) {
      addMessage(JSON.parse(data));
    });

    const addMessage = data => {
      this.setState({ cusipData: this.state.cusipData[data.cusip], data });

      console.log("this.state");
      console.log(this.state);
    };
  }
}

<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>

Joshua Manns · Accepted Answer · 2018-03-21 17:09:07Z

1

I would be careful with using setState when self-referencing this.state in the method as state should remain immutable. This should work.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cusipData: []
    };

    this.socket = io("adresss");

    this.socket.on("ringBuffer", function(data) {
      addMessage(JSON.parse(data));
    });

    const addMessage = data => {
      this.setState((prevState, props) => {
        const newCusipData = prevState.cusipData;
        newCusipData[data.cusip] = data;

        return {
          cusipData: newCusipData
        };
      });

      console.log("this.state");
      console.log(this.state);
    };
  }
}

answered Mar 21, 2018 at 17:09

Joshua Manns

6855 silver badges6 bronze badges

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

1 Comment

Joshua Manns Over a year ago

@SteveBohmbach No problem. If this is solved, can you mark it as well for others looking to accomplish the same thing?

Keegan Teetaert · Accepted Answer · 2018-03-21 19:26:24Z

0

The following method addMessage adds the data.cusip parameter to the existing state.cusipData array.

class App extends Component {
  constructor(props)
  {
    super(props)
    
    this.state = {
      cusipData: [],
    };

    this.socket = io("adresss")

    this.socket.on('ringBuffer', function(data){
        addMessage(JSON.parse(data));
    });

    const addMessage = data => {
      // adds the new data.cusip to the existing state array
      this.setState({
        cusipData: [...this.state.cusipData, data.cusip]
      });
    };
  }

edited Mar 21, 2018 at 19:26

answered Mar 21, 2018 at 16:59

Keegan Teetaert

7837 silver badges26 bronze badges

1 Comment

Steve Bohmbach Over a year ago

I needed to add if not there, and update if it already exsists

Collectives™ on Stack Overflow

creating an empty state object that has a key value array with JSON objects as the values and than changing those json objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related