.filter() function creating loop in delete function

I've got a 'list' component, which allows you to add an item to a state array, and then display it from the state afterwards. These list items can then be removed by the user afterwards (or should be able to).

There's four state props in this component:

currentList: content in the input that's to be added to the list array
setCurrentList: what's used to change the content in the input
fullList: the full array list
setFullList: used to add the currentList content to the array, and removed

I'm using .filter() to create a copy of the state array, and then set the state afterwards in this function:

const deleteFromList = (e) => {

        console.log("Delete button pressed")
        console.log(e)

        let fullList = props.fullListState
        let setFullList = props.setFullListState

        let filteredArray = fullList.filter(item => item)

        setFullList(filteredArray)
    }

However, every time I execute this function (i.e. when the delete button is pressed), it just creates a loop and the first two console.logs are just repeatedly done.

This is the full return function itself:

<>
            <label className="setup-jobs-label">{props.label}</label>
            <div className="setup-jobs-input-container">
                <input className="setup-jobs-alt-input" type="text" onChange={onChange} value={props.currentListState} />
                <button className="setup-jobs-add-button" onClick={addToList}>Add</button>
            </div>
            { props.fullListState === [] ? null : props.fullListState.map(x => {
                return <div className="setup-jobs-input-container" key={props.fullListState[x]}>
                    <p className="setup-jobs-input-paragraph">{x}</p>
                    <button className="setup-jobs-delete-button" onClick={deleteFromList(x)}>Delete</button>
                </div>
            }) }
        </>

The important bit is the bottom conditional render, which checks to see if the state array is empty, and if so, not display anything. If it isn't, then it returns null.

Any advice would be appreciated - not sure what I'm doing wrong in the filter function.

CodePudding user response：

In your onClick handler, you pass the result of the execution of deleteFromList, you should pass a reference to this function instead :

// note the '() =>' 
<button className="setup-jobs-delete-button" onClick={() => deleteFromList(x)}>Delete</button>

See https://reactjs.org/docs/handling-events.html for more details about this.

Beside this, your filter logic does not seem right :

// this line only removes falsy values, but not the "e" values
let filteredArray = fullList.filter(item => item)

// you should implement something like this
let filteredArray = fullList.filter(item => [item is not "e"])
// this should work as we work on objects references
let filteredArray = fullList.filter(item => item !== e)