Add values of two inputs within an array?

Asked

Viewed 92 times

0

Could someone help me.

Sane 4 inputs on the screen where the person enters with the notes. I am doing the following, I take the value of each input and play within an array to add up later.

However the array with Onchange and Oninput the array is as follows:

input1 = 10 input = 20

array = ['1', '10']

I want it to stay that way

array = [10, 20]

I put as text the input and want to transform with parseint to numeric, however I could not do ?

Guys, I tried to explain as best I could, I saw that you already gave a -1, but I’m new I’m learning, I hope the staff instead of wanting to close the question or putting -1, help who is starting, I hope it’s well explained, I made a code sketch hope it helps, if there is something wrong tell me, we are here to help and the feedback is worth a lot.

import React, { Component } from "react";

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

    this.state = {
      text: "",
      notas: [],
    };
  }

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

    const array = this.state.notas;
    array.push(this.state.text);

    this.setState({
      notas: array,
    });

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

  render() {
    return (
      <div>
        <input type="text" name="text" onChange={this.input} /> <br />
        {this.state.text} <br /><br />
        {this.state.notas.map((n, index) => {
          return <p key={index}>{n}</p>;
        })}
      </div>
    );
  }
}
react

  • The answer came true Daniel?

  • Thanks Novic helped yes, but I still have some problems, I even reformulated the question, I’m trying to do here since yesterday but I’m a little lost. But thank you very much.

  • You cannot tailor your question to a new doubt, this is not allowed here

  • If you have too many doubts, create a new question, as I repeat, it is not valid.

  • The doubt is still the same

  • You have not changed to suit for a new answer, it is not valid.

  • No, I rephrased the question by putting more details, but she is the same as before, so much so that at first and I put several doubts and with.

  • Daniel I answered your initial question and you were not satisfied because, comment?

Show 3 more comments

1 answer

1


The this.setState when invoked does not change the value of the component variables and shows, you have to update every component for this to occur, but in the second parameter can be written a function that will be executed when the component variable is changed, example:

this.setState({counter: counter + 1} , () => console.log(counter));

this line exemplifies as well as the update of the component variable, being finally shown in the console.log your latest update.

In your code something like this solves:

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

  input = (e) => {
  
    this.setState({
      [e.target.name]: e.target.value,
    }, () => {
      const array = [...this.state.notas, this.state.text]
      this.setState({
        notas: array,
      }, () => {
        console.log(this.state.notas);
      });
    });
  };

  render() {
    return (
      <div>
        <input type="text" name="text" onChange={this.input} /> <br />
        {this.state.text} <br /><br />
        {this.state.notas.map((n, index) => {
          return <p key={index}>{n}</p>;
        })}
      </div>
    );
  }
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

If you were using Hooks, for this to happen you have to use the useState to monitor the changes.

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.