Taking user inputs in react js dynamically

Question

import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Modals extends Component {
  constructor(){
    super();
    alert("start3e");
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
 {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
    name: "beacon name 123",
    description: "beacon description here for beacon",
    uuid: "mnvijefnvj4356vrev",
    major: "7",
    minor: "9",
    manufacturer: "m:2-3=0215,i:4-19,i:20-21,i:22-23,p:24-24",
    beaconType: "type9",
    location: "main gate8",
    floor: "ist",
    zone: "58c29c06d3ec866803040e6e"
})
}).then(function(response){
  if(response.ok) {
      console.log(response)
    return response;
  }
  throw new Error('Network response was not ok.');
}).then(function(data) { 
  console.log(data);
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error);
});
}
  render() {
    return (<div><div>
          <div className="animated fadeIn">
            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Beacon Settings
              </div>
              <div className="card-block">
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-user"></i></span>
                  <input type="text" className="form-control" placeholder="UUID" />
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" placeholder="Major Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" placeholder="Minor Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" placeholder="Manufacturer Number"/>
                </div><center>
                <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Save</Link>

<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>

            </div>
          </div>
</div></div>
      </div>
      
        
      
    )
  }
}

export default Modals;

I want to take user inputs from the screen only. how to take that? after that i will post those values on the server using post request which is working fine. I just wanted user values in the fields on the screen and those were to be sent to the server dynamically

You can set onChange property for each inpu which will call callback like this onChange={(event) => console.log(event.target.value)}. This event will be fired every time you change the valu in input — Jozef Cipa, Mar 11 '17 at 11:22

gor181 · Answer 1 · 2017-03-16T20:24:57.313

Usually I use redux-form which makes it really easy to gather the values on form submission.

If you are not using it (and I do not see you do), you can do one of the following:

Introduce state to the whole component and onChange handlers to all inputs updating the state
Set ref to each of the input and get the values in submit handler function.

If you don't have a case where you need to validate forms then you do not need state and ref's can help you.

So full code example would be something as:

import React, {Component} from 'react';
import {Link} from 'react-router'
import {Dropdown, DropdownMenu, DropdownItem, Progress} from 'reactstrap';

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

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    const uuid = this.uuid.value;
    const manufacturer = this.manufacturerNumber.value;
    const minor = this.minorNumber.value;
    const major = this.majorNumber.value;

    fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
     {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
    },
    body: JSON.stringify({
        name: "beacon name 123",
        description: "beacon description here for beacon",
        uuid: uuid,
        major: major,
        minor: minor,
        manufacturer: manufacturer,
        beaconType: "type9",
        location: "main gate8",
        floor: "ist",
        zone: "58c29c06d3ec866803040e6e"
    })
    }).then(function(response){
      if(response.ok) {
          console.log(response)
        return response;
      }
      throw new Error('Network response was not ok.');
    }).then(function(data) {
      console.log(data);
    })
    .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error);
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="animated fadeIn">
          <br/>
          <div className="card" style={{
            width: 57 + '%'
          }}>
            <div className="card-header">
              Beacon Settings
            </div>
            <div className="card-block">
              <div className="input-group mb-1">
                <span className="input-group-addon">
                  <i className="icon-user" />
                </span>
                <input
                  ref={ref => (this.uuid = ref)}
                  type="text"
                  className="form-control"
                  placeholder="UUID"
                />
              </div>

              <div className="input-group mb-1">
                <span className="input-group-addon">
                  <i className="fa fa-align-justify" />
                </span>
                <input
                  ref={ref => (this.majorNumber = ref)}
                  type="text"
                  className="form-control"
                  placeholder="Major Number"
                />
              </div>

              <div className="input-group mb-1">
                <span className="input-group-addon">
                  <i className="fa fa-align-justify" />
                </span>
                <input
                  ref={ref => (this.minorNumber = ref)}
                  type="text"
                  className="form-control"
                  placeholder="Minor Number"
                />
              </div>

              <div className="input-group mb-1">
                <span className="input-group-addon">
                  <i className="fa fa-align-justify" />
                </span>
                <input
                  ref={ref => (this.manufacturerNumber = ref)}
                  type="text"
                  className="form-control"
                  placeholder="Manufacturer Number"
                />
              </div>

              <center>
                <Button type="submit" color="primary">
                  Click me to send values to the api!
                </Button>
                <Link to={'/components/tabs'}
                  className="nav-link btn btn-block btn-success"
                  activeClassName="active"
                  style={{
                    width: 27 + '%'
                  }}
                >
                  Save
                </Link>

                <Link to={'/components/tabs'}
                  className="nav-link btn btn-block btn-success"
                  activeClassName="active"
                  style={{
                    width: 27 + '%'
                  }}
                >
                  Advanced Settings
                </Link>
              </center>
            </div>
          </div>
        </div>
      </form>
    )
  }
}

export default Modals;

I haven't tested it but it should get you an idea on what to do. Usually I do not use refs in order to get values of the inputs as I use redux-form in all my recent projects. Make sure to check it out.

Yeh as I said, I didn't test it. The potential issue could be that there was a typo when assigning refs. Regardless the accepted answer is correct as it stores the values to state. — gor181, Mar 16 '17 at 20:26

score 0 · Accepted Answer · answered Mar 15 '17 at 05:42

import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Modals extends Component {
  constructor(props){
    super(props);
    this.state = {inputuuid: '',
    inputmajor: '' ,
    inputminor: '' ,
    inputmanufacturer: ''};
    this.handleUuid = this.handleUuid.bind(this);
    this.handleMajor = this.handleMajor.bind(this);
    this.handleMinor = this.handleMinor.bind(this);
    this.handleManufacturer = this.handleManufacturer.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    alert("started");
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
 {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
    name: "beacon name 1234",
    description: "beacon description here for beacon",
    uuid: this.state.inputuuid,
    major: "{this.state.inputmajor}",
    minor: "{this.state.inputminor}",
    manufacturer: "{this.state.inputmanufacturer}",
    beaconType: "type9",
    location: "main gate8",
    floor: "ist",
    zone: "58c29c06d3ec866803040e6e"
})
}).then(function(response){
  if(response.ok) {
      console.log(response)
    return response;
  }
  throw new Error('Network response was not ok.');
}).then(function(data) { 
  console.log(data);
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error);
});
}

handleUuid(event) {

    this.setState({inputuuid: event.target.value});
  }
  handleMajor(event){
    this.setState({inputmajor: event.target.value});
  }
  handleMinor(event){
    this.setState({inputminor: event.target.value});
  }
  handleManufacturer(event){
        this.setState({inputmanufacturer: event.target.value});
  }
handleSubmit(event) {

    alert('Submitted: ' + this.state.inputuuid + this.state.inputmajor + this.state.inputminor + this.state.inputmanufacturer);
    event.preventDefault();
  }

  render() {
    const uuid= this.state.inputuuid;
    return (<div><div>
          <div className="animated fadeIn">
            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Beacon Settings
              </div>
              <div className="card-block">
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-user"></i></span>
                  <input type="text"  className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID" />
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="Manufacturer Number"/>
                </div><center>
                <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success"  onClick={this.handleSubmit} activeClassName="active">Save</Link>

<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>

            </div>
          </div>
</div></div>
      </div>
      
        
      
    )
  }
}

export default Modals;

This is the answer as i had applied different states on different inputs

Why don't you create a generic function to update the state variables based on keys? You don't really need to create so many handleXXX(). — MattYao, Mar 15 '17 at 06:00
It will be duplicated. Please check this post: (http://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name) — MattYao, Mar 15 '17 at 06:14
i tried that but its not working Can you just look at other question here http://stackoverflow.com/questions/42802331/how-to-send-input-data-taken-dynamically-to-the-server-using-post-request — Piyush, Mar 15 '17 at 06:17

Taking user inputs in react js dynamically

2 Answers2