I am trying to delete a list item from a group of list items that I obtain dynamically from a REST API. I can delete the list item from the BACKEND with an axios request just fine, but i have to refresh the page in order for the actual list item display to no longer show. I'm trying to just delete the list item from the UI so that when I press delete, it will both delete on the backend and the frontend. Can't seem to figure it out and I've tried quite a few different ways.
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
loading: false,
value: '',
open: false
};
this.toggle = this.toggle.bind(this);
}
search = async val => {
this.setState({ loading: true });
let res = await search(
`https://zuul-stage.whatifops.com/v1/user/phone/${val}`
);
this.setState({ users: res, loading: false });
};
onChangeHandler = async e => {
this.search(e.target.value);
this.setState({ value: e.target.value });
};
toggle() {
this.setState({
open: !this.state.open
});
}
get renderUsers() {
let users = <h1 />;
if (!this.state.loading) {
users = this.state.users.map(user => (
<div>
<Row>
<Col lg={2} style={{ maxWidth: '9.7%' }}>
<Button
color='danger'
style={{ paddingTop: 12, paddingBottom: 12 }}
onClick={this.toggle}
>
<i className='fa fa-trash'></i> Delete
</Button>
</Col>
<Col lg={10}>
<ListGroup>
<ListGroupItem key={user.id} value={user.value} id={user.id}>
<strong>Email:</strong> {user.email}
<strong>Phone:</strong> {user.phone}
</ListGroupItem>
</ListGroup>
</Col>
</Row>
<br />
<Modal
isOpen={this.state.open}
toggle={this.toggle}
className={'modal-danger'}
>
<ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
<ModalBody>
<Row>
<Col
lg={2}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#f86c6b'
}}
>
<i className='fa fa-warning fa-3x'></i>
</Col>
<Col lg={10}>
Are you sure you want to delete the user with the following
credentials:
<br />
<br />
<span>
{' '}
<strong>
<i className='fa fa-envelope'></i> Email:
</strong>{' '}
{user.email}
</span>
<br />
<span>
{' '}
<strong>
<i className='fa fa-phone'></i> Phone:
</strong>{' '}
{user.phone}
</span>
</Col>
</Row>
<br />
</ModalBody>
<ModalFooter>
<Button color='danger' onClick={this.open}>
Delete
</Button>
<Button color='secondary' onClick={this.open}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
));
} else {
return <p>Loading...</p>;
}
return users;
}
render() {
return (
<div>
<div className='display-4'>Users</div>
<hr />
<Row>
<Col lg={12}>
<Label>Enter an email or phone number:</Label>
</Col>
</Row>
<Row>
<Col lg={12}>
<Input
value={this.state.value}
onChange={e => this.onChangeHandler(e)}
placeholder='Begin typing to search'
/>
</Col>
</Row>
<br />
{this.renderUsers}
</div>
);
}
}
export default App;
Any and all would be appreciated. Thanks!
**Updated code:
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
loading: false,
value: '',
open: false
};
this.toggle = this.toggle.bind(this);
}
search = async val => {
this.setState({ loading: true });
let res = await search(
`https://zuul-stage.whatifops.com/v1/user/phone/${val}`
);
this.setState({ users: res, loading: false });
};
onChangeHandler = async e => {
this.search(e.target.value);
this.setState({ value: e.target.value });
};
toggle() {
this.setState({
open: !this.state.open
});
}
onDelete(e) {
let id = e.target.id;
let updatedUsers = this.users.filter(user => user.id != id);
this.setState({ users: updatedUsers });
}
get renderUsers() {
let users = <h1 />;
if (!this.state.loading) {
users = this.state.users.map(user => (
<div>
<Row>
<Col lg={2} style={{ maxWidth: '9.7%' }}>
<Button
color='danger'
style={{ paddingTop: 12, paddingBottom: 12 }}
onClick={this.onDelete(user.id)}
>
<i className='fa fa-trash'></i> Delete
</Button>
</Col>
<Col lg={10}>
<ListGroup>
<ListGroupItem key={user.id} value={user.value} id={user.id}>
<strong>Email:</strong> {user.email}
<strong>Phone:</strong> {user.phone}
</ListGroupItem>
</ListGroup>
</Col>
</Row>
<br />
<Modal
isOpen={this.state.open}
toggle={this.toggle}
className={'modal-danger'}
>
<ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
<ModalBody>
<Row>
<Col
lg={2}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#f86c6b'
}}
>
<i className='fa fa-warning fa-3x'></i>
</Col>
<Col lg={10}>
Are you sure you want to delete the user with the following
credentials:
<br />
<br />
<span>
{' '}
<strong>
<i className='fa fa-envelope'></i> Email:
</strong>{' '}
{user.email}
</span>
<br />
<span>
{' '}
<strong>
<i className='fa fa-phone'></i> Phone:
</strong>{' '}
{user.phone}
</span>
</Col>
</Row>
<br />
</ModalBody>
<ModalFooter>
<Button color='danger' onClick={this.open}>
Delete
</Button>
<Button color='secondary' onClick={this.open}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
));
} else {
return <p>Loading...</p>;
}
return users;
}
render() {
return (
<div>
<div className='display-4'>Users</div>
<hr />
<Row>
<Col lg={12}>
<Label>Enter an email or phone number:</Label>
</Col>
</Row>
<Row>
<Col lg={12}>
<Input
value={this.state.value}
onChange={e => this.onChangeHandler(e)}
placeholder='Begin typing to search'
/>
</Col>
</Row>
<br />
{this.renderUsers}
</div>
);
}
}
export default App;
I am guessing you want to delete the user from this.state.users, you can something like this
onDelete(id){
let updatedUsers = this.users.filter(user=>user.id!=id)
this.setState({users:updatedUsers })
}you need to add an id to each user if already don't have.
My suggestion would once you made an API call only delete it from the frontend if its a success so you can add this code in API success call back. So, if the delete call fails don't delete it on the front end either
onClick={() => this.onDelete(user.id)}
this is how you should attach onDelete
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments