change object property to match values in given array

Question

Heres my app structure

Codepen Example : https://codesandbox.io/s/awesome-blackwell-kd3nn

class MasterForm extends Component {
  constructor() {
    super();

    this.state = {
      userInput: "",
      available: "",
      silos: []
    };
  }

  handleFormSubmit = e => {
    e.preventDefault();
    this.silo_1Lookup();
  };

  handleInputChange = e => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    });
  };

  silo_1Lookup = () => {
    let silos = [...this.state.silos];

    silos.push({
      userInput: this.state.userInput,
      available: this.state.available
    });

    this.setState({
      silos,
      userInput: "",
      available: ""
    });

    const siloDepthFilling = {
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    };
    console.log("function ran");
    return siloDepthFilling[silos[0].userInput];
  };
}

I'm trying to change the property of silos[0].available to match the content inside of my silo_1Lookup() function.

For example, if the user enters 5, silos[0].available should be set to "595"

if (silos[0].userInput === '5') {
 return silos[0].available = "595"
}

kinda like that but using the dictionary inside silo_1Lookup();

At the moment, the function runs, but silos[0].available is not being updated with a new value, and there is no error message

Looks like you are not calling setState() after calling silo_1Lookup(). — Nikhil
– Nikhil, Commented Sep 12, 2019 at 1:03
@Nikhil where should it be? I've moved it to the bottom of my silo_1lookup() but still doesn't work — invrt
– invrt, Commented Sep 12, 2019 at 1:46

Nikhil · Accepted Answer · 2019-09-12 03:19:05Z

2

You are not updating the state after changing available value.

In your function, call setState() after making required changes.

You are using silos to display both userInput and available. So updating silos is what changes the view, not available.

silo_1Lookup = () => {

    const siloDepthFilling = {
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    };
    console.log("function ran");

    let available = siloDepthFilling[this.state.userInput];

    let silos = [...this.state.silos];

    silos.push({
      userInput: this.state.userInput,
      available: available
    });

    this.setState(
      {
        silos: silos,
        available: available
      }
    );
  };

Also, you are not using key for your list items and it is throwing an error. Make following changes to your Table component.

{silos.map((silo, i) => {
     return (
        <tr key={i.toString()}>
           <td>{silo.userInput}</td>
           <td>{silo.available}</td>
        </tr>
      );
 })}

Live demo: https://codesandbox.io/s/vigorous-jennings-wlw8j

edited Sep 12, 2019 at 3:19

answered Sep 12, 2019 at 1:54

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

5 Comments

invrt Over a year ago

this is what I initially tried after reading your comment, however available remains unchanged

Nikhil Over a year ago

@invrt - Without any other info it is hard to tell what is going wrong. Replicate the problem in StackBlitz or similar sites and update your question with the link.

invrt Over a year ago

It seems to work when I execute the code a second time around, but yes...I'll try replicate the codebase

invrt Over a year ago

Here's there a codepen codesandbox.io/s/awesome-blackwell-kd3nn

Nikhil Over a year ago

@invrt - Check out my edited answer. Make those changes it should be working. Live demo: codesandbox.io/s/vigorous-jennings-wlw8j

Mir Shakawat Ali Jibon · Accepted Answer · 2019-09-12 04:36:42Z

2

The root cause of your problem is, you need to update every time your array silos[] when you will get a new value for available. so the approach has given below.

  handleInputChange = e => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    });
  };

  silo_1Lookup = () => {
    let silosss = [...this.state.silos];
    const siloDepthFilling = {
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    };

    // Push user input and available value in array
    silosss.push({
      userInput: this.state.userInput,
      available: siloDepthFilling[this.state.userInput]
    });

    // Finally update the state of both array and available value
    for(var item of silosss){
      this.setState({
        silos:silosss,
        available: item.available
      });
    }
  };

Finally, the output should be like that

edited Sep 12, 2019 at 4:36

answered Sep 12, 2019 at 4:31

Mir Shakawat Ali Jibon

3082 silver badges14 bronze badges

2 Comments

Nikhil Over a year ago

Calling setState() in for loop here is inefficient and redundant because each iteration overrides previous state, and every time only the last iteration's values are set in the state.

Mir Shakawat Ali Jibon Over a year ago

@Nikhil: Thanks for your comment my concern was to show the available value is changing every time by setting state in output screen and pushing the value inside of an array. But of course, you are right. I agree. I don't want to edit my code because your comment can be another learning point for everyone from the above code..

Collectives™ on Stack Overflow

change object property to match values in given array

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related