React

HTML

<div id="app"></div>

React

const {useCallback, useState} = React;


function FilterBlock(props) {

    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
    ]

    return (
        <div>
            <button onClick={props.onDeleteFilter}>remove</button>
            <input value={props.value} onChange={props.onChange}></input>
              
        </div>
    )
}


function App() {
    
    const [values, setValues] = useState(['strawberry']);
    
    const addFilterBlock = useCallback(() => {
			setValues(values.concat(''));
    }, [values]);

    const onDeleteFilterBlock = useCallback((index) => {
    	setValues(values.filter((v, i) => i !== index));
    }, [values]);
    
    const setFilterValue = useCallback((index, value) => {
    	const newValues = [...values];
			newValues[index] = value;
      setValues(newValues);
    }, [values]);

    return (
        <div>
            {
                values.map((value, index) => (
                    <FilterBlock
                        key={index}
                        onDeleteFilter={() => onDeleteFilterBlock(index)}
                        value={value}
                        onChange={(e) => setFilterValue(index, e.target.value)}
                    />
                ))
            }
            <button onClick={addFilterBlock}>add</button>
        </div>
    )
}


ReactDOM.render(<App />, document.querySelector("#app"))