React setState not firing in first time

Question

i saw similar questions but can't get some solution.

i have some input when you paste some text to input i'm trying to set it to state and render this text. But when paste in first time state not change in second time when paste everything works.

I don't understand why it happen i already used some setTimeOut function too for it but not helped.

here is my code:

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      no: ""
    };
  }

  pasteSomeText = e => {
    this.setState({
      no: e.target.value
    });
  };

  render() {
    return (
      <div style={styles}>
        {this.state.no}
        <input onPaste={event => this.pasteSomeText(event)} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Here is codeSandBox example: https://codesandbox.io/s/1-react-hello-world-tvscf?fontsize=14

@user3348410 why are you using onPaste instead of onChange method? — akhtarvahid, Oct 22 '19 at 12:26
use `onChange` instead of `onPaste`. Updated [https://codesandbox.io/s/1-react-hello-world-h2jgv](https://codesandbox.io/s/1-react-hello-world-h2jgv) — Yahiya, Oct 22 '19 at 12:26
Possible duplicate of [Javascript OnPaste](https://stackoverflow.com/questions/10972954/javascript-onpaste) — layonez, Oct 22 '19 at 12:27
How about we understand why onPaste doesn't work instead of suggesting something else? — Juan Mendes, Oct 22 '19 at 12:28
why? onPaste not works ? so what is the problem with onPaste. I'm using at onchange another things — user3348410, Oct 22 '19 at 12:28

layonez · Answer 1 · 2019-10-22T12:41:46.483

Basically the reason why you get empty state on firts onpaste call is that onpaste fires before the input's value is changed. So you get empty event.target.value and for all other calls you get previous value.

And if you still decide to keep going with onpaste you should keep in mind that you can get pasted value with event.clipboardData.getData('Text') but it can differ from what have been pasted in input because of different behavior of clipboardData for different input types.

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

So for work with clipboard data I will recommend to use DataTransfer module from https://www.npmjs.com/package/fbjs to get more consistant behavior in different systems and browsers.

score 3 · Accepted Answer · answered Oct 22 '19 at 12:32

To get the data from the event, use e.clipboardData.getData('text'). See https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

e.target.value gives you the value for the text field before it updates with the paste data, so you can cancel/modify the paste if you want.

  pasteSomeText(e) {
    this.setState({
      no: e.clipboardData.getData('text')
    });
  };

Side note: with the call from the HTML, you don't need to use this arrow function (which uses more memory), see my example above

score 0 · Answer 3 · answered Oct 22 '19 at 12:36

0

Is a diferente kind of event you will need to get the clipboard data from the event and set it to the state

const value = e.clipboardData.getData('text')

answered Oct 22 '19 at 12:36

Douglas R. Santos

129
4

score -1 · Answer 4 · answered Oct 22 '19 at 12:27

-1

use

onChange

instead of using

onPaste

Updated https://codesandbox.io/s/1-react-hello-world-h2jgv

answered Oct 22 '19 at 12:27

Yahiya

571
2
13

React setState not firing in first time

4 Answers4