In what ways could this React code be improved? - reactjs

Question

I am brand new to React and only semi familiar with JS. I starting making an application using React/Flask/Mongodb, but I am getting tripped up on some of the best way to structure my function calls/variable sets/renders. I have done my research enough to get this component working, but I feel like it's clunky and there is a better way. Essentially, I am trying to retrieve results from my DB for an item wishlist and show their attributes on screen. I have struggled with the returns from Promises as well variable scope/placement in order to render my returned lists. Ideally, I would return my list from the DB and have that stored without modification so I can create a list that actually shows on the UI that can be changed due to filters. Let me know if I posted this incorrectly.
Wishlist.js
import React from 'react';
import ReactDOM from "react-dom";
import Apis from './apis'
class Wishlist extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
quantity: 0,
baselink: "",
filter: "Default",
wishes: [],
wishesToShow: [],
loading: 'initial'
};
this.GetWishesList = this.GetWishesList.bind(this);
this.ShowWishes = this.ShowWishes.bind(this);
this.HandleFilterChange = this.HandleFilterChange.bind(this);
}
componentDidMount() {
this.setState({ loading: true });
this.GetWishesList();
}
ShowWishes() {
const uiWishes = this.state.wishesToShow
return (
< div >
{
uiWishes == null ? null :
uiWishes.map(({ name, quantity, cost, description, category, link }) => (
<div className='wish' key={cost}>
<div className="wishatt">Category: {category}</div>
<div className="wishatt">Item name: {name}</div>
<div className="wishatt">Description: {description}</div>
<div className="wishatt">Cost: {cost}</div>
<a className="wishatt" href={link}>Link: {link}</a>
<div className="wishatt">Quantity: {quantity}</div>
</div>
))
}
</div>
);
}
HandleFilterChange = (e) => {
const wishcheck = this.state.wishes
const value = e.target.value;
for (var i = wishcheck.length - 1; i >= 0; i--) {
if (wishcheck[i].category !== value) {
wishcheck.splice(i, 1);
}
if (wishcheck[i] != null) { console.log(wishcheck[i].category); }
}
this.setState({ filter: value, wishesToShow: wishcheck });
}
GetWishesList() {
Apis.GetWishes().then(function (response) { return response; }).then(data => {
this.setState({ wishes: data.data, wishesToShow: data.data, loading: 'false' });
})
}
render() {
if (this.state.loading === 'initial') {
return <h2 className="content">Initializing...</h2>;
}
if (this.state.loading === 'true') {
return <h2 className="content">Loading...</h2>;
}
const mywishes = this.ShowWishes();
return (
<div className="contentwrapper">
<div className="contentBanner"><h1 className="wishTitle">Wishes:</h1> <label>
<p className="bannerFilter">Category</p>
<select name="category" value={this.state.filter} onChange={this.HandleFilterChange}>
<option value="default">Default</option>
<option value="camping">Camping</option>
<option value="hendrix">Hendrix</option>
<option value="decor">Decor</option>
</select>
</label></div>
<div className="content"><div>{mywishes}</div>
</div>
</div>
);
};
}
export default Wishlist;
Apis.js
import axios from 'axios';
export default class Apis {
static InsertWish(body) {
console.log(body)
return axios.post(`http://localhost:5000/submitwish`, body)
.then(response => response)
.catch(error => console.log(error))
}
static GetWishes() {
return axios.get(`http://localhost:5000/getwishlists`)
.then(response => response)
.catch(error => console.log(error))
}
}

Answer 1

I would also clean up the JSX in Wishlist.js.
return (
<div className="contentwrapper">
<div className="contentBanner">
<h1 className="wishTitle">Wishes:</h1>
<label>
<p className="bannerFilter">Category</p>
<select
name="category"
value={this.state.filter}
onChange={this.HandleFilterChange}>
<option value="default">Default</option>
<option value="camping">Camping</option>
<option value="hendrix">Hendrix</option>
<option value="decor">Decor</option>
</select>
</label>
</div>
<div className="content">
{mywishes}
</div>
</div>
);

Answer 2

You don't need to import useEffect or useState because you're not using functional components.
So I would change line 1 in Wishlist.js—
from
import React, { useEffect, useState } from 'react';
to
import React from 'react';