React .map filtering

Question

In React(axios), I am trying to filter response data using 2 variable arguments. These variables are set from a setState on hud.js. The value I need to access should be filtered from the response data with the element combination being in a column called Combo and the second being in a column named Result, and will return "Smoke" to the hud.js in the "combined element" state. I can call the table fine by can't get it too accept any args to filter. I'm sure i just have the syntax wrong but can't figure out where.

hud.js

export default class Hud extends Component {
  constructor(props) {
    super(props);

    this.state = {
      element1: "blank",
      element2: "blank",
      combinedElement: "blank",
      form: "blank",
      spell: "blank",
    };
setFireMana = () => {
    if (this.state.element1 == "blank") {
      this.setState({ element1: "Fire" });
    } else {
      this.setState({ element2: "fire" });
    }
  }
combineElements = () => {
    const elementsToCombine = element1/element2;
    if (element2 !== "blank") {
      axios.get(`http://127.0.0.1:5000/Element`).then((response) => {
        
          console.log(response.data.filter(Combo === `${this.state.element1}/${this.state.element2}`))
         
        })
      };
    
  };
<div className="foreground">
            <div className="left-side">
              <div className="live">{this.state.element1}</div>
              <div className="dead">{this.state.combinedElement}</div>
            </div>
            <div className="right-side">
              <div className="live">{this.state.element2}</div>
              <div className="dead">{this.state.form}</div>
            </div>
          </div>
        </div>
        <div className="hud">
          <div className="mana">
            <button onClick={this.setFireMana}>
              <img src={fireicon} />
            </button>

I am still having a lot of trouble with this. I updated the question to be more specific. — Cwelfley01, Aug 22 '22 at 23:30

chucklay · Answer 1 · 2022-08-05T19:08:54.577

I'm assuming here that you're using Flask. In this case, you'll more than likely want to use a query string. Instead of @app.route("/Element/<row>/<column>"), you'd use @app.route("/Element") and use URLs formatted like this: yourdomain/Element?row=<row>&column=<column> to send users there. From there you can use flask's request.args to access the row and column. In all:

@app.route("/Element", methods=["GET"])
    def Element():
    row = reqeust.args.get("row", None)
    column = request.args.get("column", None)
    # Row and Column will be `None` if not provided. You should probably
    # add some logic here to deal with that if it happens
    first_element = request.query.get(row)
    combined_element = request.query.get(column) 
    return jsonify(element_schema(combined_element))

See this response to a similar question for why this is the best method to handle this scenario (especially if your route only needs to support GET requests).

I need to return this from an onChange (which I have figured out) with /Element before it. so the end needs to be 'http://localhost:5000 /Element/first_element/combined_element' — Cwelfley01, Aug 05 '22 at 18:16

React .map filtering

1 Answers1