получение свойств объекта из функции обработчика событий

Question

почему 'onClick = onClickRemove (items.objectID)' с ошибочными элементами не определено: Список массивов:

const list = [
{
title: 'React',
author: 'Jordan Walke',
objectID: 0,
},
{
title: 'Redux',
author: 'Dan Abramov, Andrew Clark',
objectID: 1,
},
]

извлекающая функция для карты: здесь onClickremove (items.objectID)не получается получить свойство из массива items? почему, пожалуйста, объясните.

function extractProps(items){
    var x = "<div> <span>" +items.title+", </span> <span>"+items.author +
        "</span><span>
<button type='button' onClick='onClickRemove(items.objectID)'>Remove</button></span></div> "
return x;
}

Функция "onClickRemove":

  function onClickRemove(id){
        console.log(id)
    //     const updatedList = list.filter(isNotId = (item)=> item.objectID!==id);
    //     console.log(id);
    //    mapFilteredArray(updatedList);
    }

Основная функция:

   function myFunc(searchitem=''){

        document.getElementById('root').innerHTML = "";
        var y= list.filter( (item) => item.title.toLowerCase().includes(searchitem.toLowerCase())).map(extractProps).join("");;

    document.getElementById('root').innerHTML = filteredList;
    }
    myFunc();

Answer 1

Посмотрите на это:

const list = [
  { title: 'React',author: 'Jordan Walke',objectID: 0,},
  { title: 'Redux',author: 'Dan Abramov, Andrew Clark',objectID: 1,}
]

function extractProps(items){
    var x = "<div> <span>" +items.title+", </span> <span>"+items.author +
        "</span><span><button type='button' onClick='onClickRemove("+items.objectID+")'>Remove</button></span></div> "
    return x;
}


function onClickRemove(id){
        console.log(id)
    //     const updatedList = list.filter(isNotId = (item)=> item.objectID!==id);
    //     console.log(id);
    //    mapFilteredArray(updatedList);
}


function myFunc(searchitem=''){
    document.getElementById('root').innerHTML = "";
    var filteredList= list.filter( (item) => item.title.toLowerCase().includes(searchitem.toLowerCase())).map(extractProps).join("");;
    document.getElementById('root').innerHTML = filteredList;
}

myFunc();

<div id="root"></div>

Вы вставили items.objectID в виде строки прямо здесь 'onClickRemove(items.objectID)', вызывая проблему.Я извлек его и объединил его действительное значение