react-python-tdd-tutorial/react-tuto/src/components/Settings.js

import React from 'react';
import { Link } from 'react-router-dom';

function camelize(str) {
  return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
}

class Settings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      iframeSrc: ''
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    this.restoreFromLS();
  }

  restoreFromLS() {
    const savedSettings = localStorage.getItem('rpywSettings');
    if(savedSettings) {
      try {
        const settings = JSON.parse(savedSettings);
        console.log('restore settings', settings);
        this.setState(settings);
      }
      catch(e) {
        console.error('Error while trying to restore settings from localStorage', e);
      }
    }
  }

  saveToLS() {
    const settingsJson = JSON.stringify(this.state);
    console.log('saving', settingsJson);
    localStorage.setItem('rpywSettings', settingsJson);
  }

  onChange(e) {
    const { state } = this;
    const { name, value } = e.target;
    const camelName = camelize(name);
    console.log(name, camelName, value);
    this.setState(
      Object.assign({ ...state }, { [camelName]: value })
    );
    // console.log(camelize(e.target.name));
  }

  onSubmit(e) {
    e.preventDefault();
    const { iframeSrc } = this.state;
    console.log('iframe src', iframeSrc);
    $('#iframe').attr('src', iframeSrc);
    this.saveToLS();
  }

  render() {
    const { iframeSrc } = this.state;
    console.log(this.state, iframeSrc);
    return (
      <div className="row">
        <form className="col s12" onSubmit={this.onSubmit}>

          <div className="input-field">
            <input name="iframe-src" type="text" className="validate" value={iframeSrc} onChange={this.onChange} />
            <label htmlFor="iframe-src">Iframe source URL</label>
          </div>

          <a type="submit" className="waves-effect waves-light btn">Save</a>
        </form>
      </div>
    );
  }
}

export default Settings;