wikimedica-disease-search/app/src/TermInput.js

import React, {useState} from 'react';

const enterKey = 13;
const backspaceKey = 8;

const TermInput = ({terms, setTerms}) =>
{
    const [value, setValue] = useState('');

    const handleKeyDown = ev =>
    {
        if (ev.keyCode === enterKey && value)
        {
            ev.preventDefault();

            if (!terms.includes(value))
            {
                setTerms(terms.concat([value]));
            }

            setValue('');
            return;
        }

        if (ev.keyCode === backspaceKey && !value)
        {
            ev.preventDefault();
            setTerms(terms.slice(0, -1));
            return;
        }
    };

    const handleChange = ev =>
    {
        setValue(ev.target.value);
    };

    const handleRemove = removedTerm =>
    {
        console.log(removedTerm);
        console.log(terms);
        setTerms(terms.filter(term => term !== removedTerm));
    };

    return (
        <div className="TermInput">
            {terms.map(term => 
                <span
                    className="TermInput_term"
                    onClick={handleRemove.bind(null, term)}
                >{term}</span>
            )}
            <input
                autoFocus={true} type="text" className="TermInput_input"
                placeholder="Rechercher un symptôme, un signe ou une maladie…"
                value={value}
                onChange={handleChange} onKeyDown={handleKeyDown} />
        </div>
    );
}

export default TermInput;