Hello. Item is not deleted on the UI but gets deleted on the backend. I'm still learning react and could use some help to solve this. Thanks

[Harry_1]

Here is my deleteBootcamp action:

export const deleteBootcamp = (token, _id) => async (dispatch) => {
  try {
    const res = await axios({
      method: 'delete',
      url: `/api/v1/bootcamps/${_id}`,
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-type': 'application/json',
      },
    });
    console.log({ res });

    dispatch({
      type: DELETE_BOOTCAMP,
      payload: _id,
    });
  } catch (err) {
    dispatch({
      type: BOOTCAMPS_ERROR,
      payload: err.response,
    });
  }
};

//Reducer
case DELETE_BOOTCAMP:
      const filteredBootcamps = state.bootcamps.filter(
        (bootcamp) => bootcamp._id !== action.payload._id
      );
      console.log({
        filteredBootcamps,
        bootcamps: state.bootcamps,
        payload: action.payload,
      });
      return {
        ...state,
        bootcamps: filteredBootcamps,
      };
    default:
      return state;
  }
};

//Component
const DeleteBtn = ({ deleteBootcamp, token, _id }) => {
  const onDelete = (e) => {
    e.preventDefault();
    console.log(token, _id);

    deleteBootcamp(token, _id);
  };

  return (
    <div>
      <Button size="small" onClick={(e) => onDelete(e)}>
        <i
          class="material-icons"
          style={{ color: 'red', zIndex: 10 }}
          title="delete"
        >
          delete
        </i>
      </Button>
    </div>
  );
};

DeleteBtn.propTypes = {
  deleteBootcamp: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  token: state.user.token,
});

export default connect(mapStateToProps, { deleteBootcamp })(DeleteBtn);

//Delete btn is called in here
const renderData = data?.map((bootcamp) => (
    <Card
      className="gutter-row"
      key={bootcamp.id}
      title={bootcamp.name}
      style={{ marginTop: 16 }}
      extra={<DeleteBtn _id={bootcamp._id} />}
    >
      <p>
        <li key={bootcamp.id}>AvCost: ${bootcamp.averageCost}</li>
        <li key={bootcamp.id}>Description: {bootcamp.description}</li>
        <li key={bootcamp.id}>Careers: {bootcamp.careers}</li>
      </p>
    </Card>
  ));
  console.log(renderData);

  return (
    <div className="site-card-border-less-wrapper">
      <Card>
        <>{renderData && <>{renderData}</>}</>
      </Card>
    </div>
  );
};

[JeremyLT]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).