0

i'am just a newbie at React , i'am trying to make a form , when submitting i call a function "handleSubmit" that saves all the information into the state, and then displaying it into a grid , but it wont work for some reasons . i really do need your help : here is my code :

  export default class products extends React.Component  {
    constructor() {
      super();
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state =   
                {
                   QrCode: ''
                   }
    }

    handleSubmit(event) {
      event.preventDefault();
      const data = new FormData(event.target);

       data.set('username', data.get('username').toUpperCase());

      this.setState({QrCode: data});
      console.log(this.state);

    }


    render() {

      return (
      <div >
        <div >
              <form onSubmit={this.handleSubmit}>
                  <label htmlFor="username">Enter username</label>
                  <input id="username" name="username" type="text" />
                  <button>Send data!</button>
              </form>
            </div>


            <div style={{margin: '10%', marginTop : '5%'}}>

                <GridComponent dataSource={this.state} />

            </div>  

        </div>

      );
    }
  }

and here what i get : i keep getting empty array

and thank you.

Mysel Crun
  • 25
  • 4
  • https://reactjs.org/docs/faq-state.html – Brian Thompson May 28 '20 at 20:44
  • @Mysel your data is submitting. the state takes time to update whenever you `setState`. Try to console log in your render function before return. you will get the result. – sushildlh May 28 '20 at 20:49
  • @sushildlh same thing , i tryed to console log in my render and , the result is still empty . thanks btw – Mysel Crun May 28 '20 at 21:02
  • check out this [link](https://github.com/sushil-kumr/Bloggers/blob/master/src/pages/AddPost.js) and let me know you need more help. – sushildlh May 28 '20 at 21:09
  • try this `this.setState({QrCode: event.target.username.value});` or `this.setState({QrCode: event.target.elements.username.value});` and them check you will get the data. – sushildlh May 28 '20 at 21:15
  • its works when i show this : console.log(data.get('username')) – Mysel Crun May 28 '20 at 21:21

1 Answers1

1

In React, you don't need use form to take values from inputs.

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      userName: ""
    };
  }
  render() {
    return (
      <div className="App">
        <label htmlFor="username">Enter username</label>
        <input
          value={this.state.userName}
          onChange={e => this.setState({ userName: e.target.value })}
          name="username"
          type="text"
        />
        <button
          onClick={() => {
            alert(this.state.userName);
          }}
        >
          Send data!
        </button>
      </div>
    );
  }
}

Hope it help you!

Tony Starkus
  • 556
  • 2
  • 8
  • 25