React からLocalStorageに保存したい

Question

以下のコードを応用してLocalStorageに保存したいです。
よろしくおねがいします。

現状では保存ボタンを押すと、TypeError: Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.というエラーが出てしまいます

保存する形式は
{name:"inputに入力した文字列"},
{name:"inputに入力した文字列"},
{name:"inputに入力した文字列"}
というようにしたいです。

import React, { Component } from 'react'
import './App.css'

class Popup extends React.Component {
  constructor (props) {
    super(props)
    this.state = {name: ''}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange (event) {
    this.setState({name: event.target.value})
    localStorage.setItem(this.state)
  }
  render () {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
          <form onSubmit={this.handleChange}>
            01<input type='text' name='name' onChange={this.handleChange} /><br />
            02<input type='text' name='name' onChange={this.handleChange} /><br />
            03<input type='text' name='name' onChange={this.handleChange} /><br />
            04<input type='text' name='name' onChange={this.handleChange} /><br />
            05<input type='text' name='name' onChange={this.handleChange} /><br />
            06<input type='text' name='name' onChange={this.handleChange} /><br />
            07<input type='text' name='name' onChange={this.handleChange} /><br />
            08<input type='text' name='name' onChange={this.handleChange} /><br />
            09<input type='text' name='name' onChange={this.handleChange} /><br />
            10<input type='text' name='name' onChange={this.handleChange} /><br />

            <button onClick={this.handleChange}>保存</button>
          </form>
          <button onClick={this.props.closePopup}>閉じる</button>
        </div>
      </div>
    )
  }
}

export default Popup

Comments

[m.ts10806]

現在のコードで起きている問題・課題を追記してください。

[退会済みユーザー]

現状では保存ボタンを押すと、TypeError: Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.というエラーが出てしまいます。

[m.ts10806]

質問本文に追記してください

[退会済みユーザー]

追記しました。

Answer 1

yuusukoさんありがとうございました。
自己解決しましたyuusukoさんのおかげです！

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

import './App.css'

class Popup extends React.Component {
  constructor (props) {
    super(props)
    this.state = {name: ''}
  }
  handleChange (e) {
    e.preventDefault()
    var name = ReactDOM.findDOMNode(this.refs.name1).value.trim()
    var json1 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name2).value.trim()
    var json2 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name3).value.trim()
    var json3 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name4).value.trim()
    var json4 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name5).value.trim()
    var json5 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name6).value.trim()
    var json6 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name7).value.trim()
    var json7 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name8).value.trim()
    var json8 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name9).value.trim()
    var json9 = JSON.stringify({'name': name})

    name = ReactDOM.findDOMNode(this.refs.name10).value.trim()
    var json10 = JSON.stringify({'name': name})

    var json = [json1, json2, json3, json4, json5, json6, json7, json8, json8, json9, json10]
    window.localStorage.setItem('data', json)
  }
  render () {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
          <form>
            01<input type='text' ref='name1' /><br />
            02<input type='text' ref='name2' /><br />
            03<input type='text' ref='name3' /><br />
            04<input type='text' ref='name4' /><br />
            05<input type='text' ref='name5' /><br />
            06<input type='text' ref='name6' /><br />
            07<input type='text' ref='name7' /><br />
            08<input type='text' ref='name8' /><br />
            09<input type='text' ref='name9' /><br />
            10<input type='text' ref='name10' /><br />
            <button type='submit' onClick={this.handleChange.bind(this)}>保存</button>
          </form>
          <button onClick={this.props.closePopup}>閉じる</button>
        </div>
      </div>
    )
  }
}

export default Popup

Comments

[退会済みユーザー]

エレガントな方法があれば教えてください。

Answer 2

エラーについて
まず、エラーについてですが、「2つ引数が必要だけど、1つしか指定されていない」という意味だと思います。
setItemの第一引数にはキー名称が入り、第二引数に値が入ります。

localStorage.setItem(this.state);
↓
localStorage.setItem('key', this.state);

Window.localStorage

保存形式について
保存形式については、JSONを利用してはいかがでしょうか？

state[0]['name'] = 'A';
state[1]['name'] = 'B';
state[2]['name'] = 'C';
var result = JSON.stringify(state);

↓ resultが下記となると思いますので、これをローカルストレージへ。

[
    {"name":"A"},
    {"name":"B"},
    {"name":"C"}
]

実行検証を行っていないので、あくまで参考としてください。

JSON.stringify

Comments

[退会済みユーザー]

ありがとうございました。おかげさまで自己解決しました。