Not Much Going on…

I have not had a lot of time to work on my blog in the last few days, and I have not written much since getting Let’s Encrypt running (without touching it since initial install, still going strong ^_^); so, I thought I would post something and change that.

Firstly, I am working on getting a preferences thing set up so that I can change simple used-everywhere stuff (signature and password change for now, but eventually as I add more and more stuff, this page is seems pretty logical). In building this out, I noticed that there are a lot of Reactisms to which I am becoming more accustomed.

For a little background, React requires each component to keep track of state using a member variable (called state… shocker), and instead of adding listeners to a form, one is supposed to use onChange function pointers on the elements themselves. Below is an example of a very simple component:

class _ extends Component {
    constructor(props) {
    super(props);

    this.state = {
        foo: ''
    };

    // This is required for binding `this` correctly... a post for another day
    this.fooChanged = this.fooChanged.bind(this);
}

    fooChanged(event) {
    this.setState({foo: event.target.value});
}

    render() {
        return(
            <input
                type="text"
                value={this.state.foo}
                onChange={this.fooChanged}
            />
        );
    }
}

This does not seem so complicated, but one can imagine having several inputs on a form (though, we do not actually require forms anymore… a post for a different day) causing headaches from all these functions having to be created for simply wanting to update state. So, instead we can simplify by creating an intuitive mapping:

class _ extends Component {
    constructor(props) {
    super(props);

    this.state = {
        foo: '',
        bar: ''
    };

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

    inputChanged(event) {
        let newState =  {};
        newState[event.target.name] = event.target.value;
        // This will still evaluate to `{foo: event.target.value}`
        this.setState(newState);
    }

    render() {
        return(
            <>
                <input
                    type="text"
                    name="foo"
                    value={this.state.foo}
                    onChange={this.inputChanged}
                />
                <input
                    type="text"
                    name="bar"
                    value={this.state.bar}
                    onChange={this.inputChanged}
                />
            </>
        );
    }
}

There, now we have an onChange function that works for all the inputs we have, provided we ensure that each has a name attribute that corresponds to the same name of the state holding the value for that input.

I have not played with this enough, but I suspect that I can abstract out the inputChanged function into an abstract class (well… it is JavaScript, so it will just be a class that one should treat as abstract).