Массив хранить в state.
При клике на кнопку "крестик" - вызывать обработчик, например
onDeleteClick
(который является методом вашего класса)
state = {
users: [/*.. массив с юзерами*/]
}
...
onDeleteClick = (e) => {
const id = e.currentTarget.dataset.myId
const новый_массив = массив_без_удаленного_элемента (подсказка, удалять можно через фильтрацию по айди)
this.setState({ users: новый_массив })
}
...
let user = this.props.users.map(function(user){
return <li key={user.id}><User number={user.id} id={user.id} text={user.id} onDeleteClick={this.onDeleteClick}/></li>
})
...
// где-то там в компоненте User (что там внутри не знаю, но предположим есть кнопка удаления как вы пишите)
...
render() {
<div>
// что-то по верстке про юзера
<button onClick={this.props.onDeleteClick} data-my-index={this.props.user.id}> Удалить</button>
</div>
}
Главная идея: состояние (список юзеров) хранится в родителе в стейте. Для удаления, вы должны из родителя послать функцию, в качестве одного из props, чтобы внутри этой функции изменить стейт (в родителе же). Для того, чтобы понять какого пользователя удалить, передаете какой-нибудь признак, например id из нативного data-* атрибута, который сами же и устанавливаете, передавая id в качестве props из родителя, когда рисуете User