const statuses = props.statuses; const setStatuses = props.setStatuses; const StatusContainer = styled.div` display: flex; flex-direction: column `; const Status = styled.div` display: flex; flex-direction: row; justify-content: end; align-items: center; gap: 1rem; color: #fff; `; const removeItem = (removeStatusId) => { setStatuses(statuses.filter(({id}) => id !== removeStatusId)); }; const Text = styled.p` padding: 0; margin: 0; `; const CloseButton = styled.div` :hover { color: #D0FC42; } cursor: pointer; `; return ( <div> <StatusContainer> {statuses.map((s) => ( <Status key={s.id} > <Text>{s.status}</Text> <CloseButton onClick={() => removeItem(s.id)}> <i class="bi bi-x-circle"></i> </CloseButton> </Status> ))} </StatusContainer> </div> );