PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, October 14, 2022

[FIXED] How to use Form in Fetching API?

 October 14, 2022     axios, javascript, reactjs     No comments   

Issue

I'm trying to use a form on ReactJS and Axios to fetch the API and then search and filter the results based on the form entries. When I hit the Search button nothing happens, my guess is that handleSubmit is not working properly since the code is looking for the empty String after loading the page.

This is my code:

import axios from "axios"; 
import { useEffect, useState, useRef } from "react";

 
  const Routes = () => {

    const DepApt = useRef(null);
    const ArrApt = useRef(null);
  
    const handleSubmit = event => {
      console.log('handleSubmit ran');
      event.preventDefault();
  
      console.log('Dep Apt is:', DepApt.current.value);
      console.log('Dep Apt is:', ArrApt.current.value);
  
    }
    const url = 'https://api.npoint.io/3e926aca0a1e0836b459'
  
    const [data, setData] = useState([])
  
    useEffect(() => {
      axios.get(url).then(json => setData(json.data))
    }, [])
  console.log(data)

    const rte = () => {
      return data.map(user => {
        if ((user.Dep === DepApt.current.value) && (user.Arr === ArrApt.current.value))
        return (
          <ol>
            <li>{user.Max}</li>
          </ol>
        )
      })
      
    }
return (
      
      <>
        <div>
          <div>
            <div/>
          </div>
        </div>
  
        <div>
          <div>
            <div>
              <div>
                <h3>Routes</h3>
                <p>Here you can search for routes from/to XG Airports!</p>
              </div>
            </div>
            <div>
              <form onSubmit={handleSubmit}>
                <div>
                  <div>
                    <div>
                      <div>
                        <label>
                          Departure ICAO
                        </label>
                        <input
                        ref={DepApt}
                      
                          
                        />
                      </div>
  
                      <div className="col-span-6 sm:col-span-3">
                        <label >
                        Arrival ICAO
                        </label>
                        <input
                         ref={ArrApt}
                      "
                         
                        />
                      </div>
                      {rte()}
                    </div>
                  </div>
                  <div>
                    <button
                      type="submit"
             
                   >
                      Search
                    </button>
                  </div>
                </div>
              </form>

            </div>
          </div>
        </div>
<br/>

      </>
    )
  }


  export default Routes;

Solution

Your challenge here seems to be that refs don't trigger re-render after ref changes. As to why it renders many times, it may be of many reasons. I've modified your code to showcase that it works if you change the refs away and replace them with useState.

code:

import axios from "axios"; 
import { useEffect, useState } from "react";

 
  const Routes = () => {
  
    const handleSubmit = event => {
      console.log('handleSubmit ran');
      event.preventDefault();
      setShowSearchResult(true);
  
      console.log('Dep Apt is:', apt.DepApt);
      console.log('Dep Apt is:', apt.ArrApt);
      
    }
    const url = 'https://api.npoint.io/3e926aca0a1e0836b459'
  
    const [data, setData] = useState([]);
    const [apt, setApt] = useState({DepApt: '', ArrApt: ''});
    const [showSearchResult, setShowSearchResult] = useState(false);
  
    useEffect(() => {
      axios.get(url).then(json => setData(json.data))
    }, [])
  console.log(data)

    const rte = () => {
      return data.map(user => {
        if ((user.Dep === apt.DepApt) && (user.Arr === apt.ArrApt))
        return (
          <ol>
            <li>{user.Max}</li>
          </ol>
        )
      })
      
    }
return (
      
      <>
        <div>
          <div>
            <div/>
          </div>
        </div>
  
        <div>
          <div>
            <div>
              <div>
                <h3>Routes</h3>
                <p>Here you can search for routes from/to XG Airports!</p>
              </div>
            </div>
            <div>
              <form onSubmit={handleSubmit}>
                <div>
                  <div>
                    <div>
                      <div>
                        <label>
                          Departure ICAO
                        </label>
                        <input
                        onChange={(e) => setApt({...apt, DepApt: e.currentTarget.value}, setShowSearchResult(false) )}
                      
                          
                        />
                      </div>
  
                      <div className="col-span-6 sm:col-span-3">
                        <label >
                        Arrival ICAO
                        </label>
                        <input
                         onChange={(e) => setApt({...apt, ArrApt: e.currentTarget.value}, setShowSearchResult(false))}
                        />
                      </div>
                    </div>
                    {showSearchResult ? rte() : null}
                  </div>
                  <div>
                    <button
                      type="submit"
             
                   >
                      Search
                    </button>
                  </div>
                </div>
              </form>

            </div>
          </div>
        </div>
<br/>

      </>
    )
  }


  export default Routes;

Hope it helps you in achieving what you wanted to achieve :)



Answered By - axordahaxor
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing