React

by emad2710

HTML

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

React

function FilterBlock(props) {
	const [value, setValue] = React.useState('')
    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
    ]
    const onInputChange = (e) => {
    	setValue(e.target.value)
    }
    
    return (
        <div>
            <button onClick={props.onDeleteFilter}>remove</button>
            <input value={value} onChange={onInputChange}></input>
              
        </div>
    )
}


function App() {
    const [filterBlockList, setFilterList] = React.useState([FilterBlock])
    
    const addFilterBlock = () => {
        setFilterList([...filterBlockList, FilterBlock])
    }

    const onDeleteFilterBlock = (index) => {
        const filteredList = filterBlockList.filter((block, i) => i !== index);
        setFilterList(filteredList)
    }

    return (
        <div>
            {
                filterBlockList.map((FilterBlock, index) => (
                    <FilterBlock
                        key={index}
                        index={index}
                        onDeleteFilter={() => onDeleteFilterBlock(index)}
                    />
                ))
            }
            <button onClick={addFilterBlock}>add</button>
        </div>
    )
}


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