How to get data from multiple inputs and put it to the localStorage? React

Question

class Register extends Component{
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
    }

    submit(event) {
    let username = document.getElementById('username');
    let usernameValue = username.value;
    localStorage.setItem('username', usernameValue);
    }
    render(){
          return(
            <div className="register-block">
                <h4>Register</h4>
                <div className="register-block">
                    <InputGroup>
                        <Input id="username" placeholder="username" />
                        <Input id="password" placeholder="password" />
                        <Input id="tel" placeholder="tel number" />
                    </InputGroup>
                </div>
                <Button color="primary" onClick ={this.submit}>Register</Button>
            </div>
        )
    }
}

//At this point, I can put data only from input id="username". How can I get data from others inputs and store it in localStorage? Its educational project

Do you have to add everything to same localStorage entry? or you can have individual entries for each input? — Mario Nikolaus, Jan 28 '18 at 08:41
This is registration form. And there are 3 inputs: username, password, and tel number. I have to put value from this inputs to the localStorage — Sasha Zoria, Jan 28 '18 at 08:49

score 0 · Answer 1 · answered Jan 28 '18 at 08:56

0

You can do something like this:

let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
let phone = document.getElementById('tel').value;

let data = [];
data['username'] = username;
data['password '] = password;
data['phone '] = phone;

localStorage.setItem('userdata', JSON.stringify(data));

// To retrieve data try this
data = JSON.parse(localStorage.getItem('userdata'));

answered Jan 28 '18 at 08:56

Akmal

543
7
13

I'm using something similar to this in a sample app, but the values are replaced at every new entry, do you have an idea what I could do to have a list/array of data stored (NOTE: I'm storing the data in an object and passed into an array). – Eazy Dec 26 '19 at 16:51
The only way to escape replacing object is merging new object state with the old one. It means before seting new state of object you need to retrieve the old object from localStorage and update properties that were changed and save it back to the localStorage... – Akmal Dec 28 '19 at 06:44
You’re right, I solved the problem this way yesterday, thanks anyway. – Eazy Dec 28 '19 at 08:45

score 0 · Answer 2 · answered Jan 28 '18 at 08:57

First of all directly interacting with the DOM node in react is not a good idea. Secondly, You can make all your Inputs to be controlled and push the data in localStorage on submit like

class Register extends Component{
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
        this.state={
           username: '',
           password: '',
           tel: ''
        }
    }

    handleChange = (key, val) => {
      this.setState({[key]: val})
    }

    submit(event) {

      localStorage.setItem('registerData', JSON.stringify(this.state));
    }
    render(){
          return(
            <div className="register-block">
                <h4>Register</h4>
                <div className="register-block">
                    <InputGroup>
                        <Input id="username" placeholder="username" onChange={(val) => this.handleChange('username', val)} />
                        <Input id="password" placeholder="password" onChange={(val) => this.handleChange('password', val)}/>
                        <Input id="tel" placeholder="tel number" onChange={(val) => this.handleChange('tel', val)} />
                    </InputGroup>
                </div>
                <Button color="primary" onClick ={this.submit}>Register</Button>
            </div>
        )
    }
}

Assuming your Input is a custom component, you must also look into How to pass data from child to parent component. Also check Controlled Vs UnControlled Components in React

I'm using something similar to this in a sample app, but the values are replaced at every new entry, do you have an idea what I could do to have a list/array of data stored (NOTE: I'm storing the data in an object and passed into an array). — Eazy, Dec 26 '19 at 16:51

How to get data from multiple inputs and put it to the localStorage? React

2 Answers2