CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6
invrt
invrt

Reputation: 709

change object property to match values in given array

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

Upvotes: 2

Views: 83

Answers (2)

Mir Shakawat Ali Jibon
Mir Shakawat Ali Jibon

Reputation: 308

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

enter image description here

Upvotes: 2

Nikhil
Nikhil

Reputation: 6643

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

Upvotes: 2

Related Questions