TagsArea 1 Whole

import React, { Fragment } from 'react'
import Caret from './caret'
import Tag from './tag'

class TagsArea extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            cp: 0, // Caret Position
            tags: [
                { id: 1, content: "Banana" },
                { id: 2, content: "Tea" },
                { id: 3, content: "Coffee" },
                { id: 4, content: "Mobile" }
            ]
        }

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

    handleCaretKeyDown(e) {
        const { cp, tags } = this.state; let s;

        switch(e.key) {
            case "ArrowLeft": if (cp > 0) s = { cp: cp - 1 }; break;
            case "ArrowRight": if(cp < tags.length) s = { cp: cp + 1 }; break;
            case "Backspace": if(cp > 0) s = { cp: cp - 1, tags: tags.filter((_, i) => i !== cp - 1) }; break;
            case "Delete": if(cp < tags.length) s = { tags: tags.filter((_, i) => i !== cp) }; break;
            case " ": console.log("Shift: ", e.shiftKey); break;
            default: break;
        }
        // On arrow right has to save tag if not empty
        // On arroe left has to save tag if not empty
        // On click on tag - set cursor either left or right
        // 1.
        // On enter has to submit tags
        // On space enters new tag
        // 2. On enter ends the tag

        this.setState(s);
    }

    render() {
        const { cp, tags } = this.state,
              caretProps = { onKeyDown: this.handleCaretKeyDown };

        return [...tags, null].map((n, i) =>
            <Fragment key={i}>
                { cp === i && <Caret {...caretProps} /> }
                { i < tags.length && <Tag node={n} /> }
            </Fragment>
        )
    }
}

export default TagsArea