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, { useEffect, useState } 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))

    }
}

CodePudding user response：

You don't know 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';

CodePudding user response：

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>
);