In nextJS map over array then fetch external data

Pargeo 0
Viewed 22

I'm really stuck at this, and can't find any relevant info. I'm probably going the wrong way here, but can't really make any progress. Basically what I'm trying to do is:

  • copy barcodes from excel table into textarea (is working)
  • make an array from those barcodes (is working)
  • map over that array so the barcodes become part of fetch url
  • fetch the data (multiple)
  • show data for each entry

This is all the code I have here, where basically first and last part are from working getServerSideProps for single fetch.

import { useState } from "react";
import Form from "../components/Form";

const defaultAPI = "http://api.discogs.com/database/search?type=master&q=63757708322";
const fetchRelease = "http://api.discogs.com/database/search?type=master&q=";

let headers = new Headers({
  "User-Agent": "LearningHowToDoIt/0.1",
  Authorization: process.env.TOKEN,
});

export async function getServerSideProps() {
  const res = await fetch(defaultAPI, { headers: headers });
  const data = await res.json();

  return {
    props: {
      results: data,
    },
  };
}

export default function Test({ results }) {
  const [barcodes, setBarcodes] = useState([]);

  const addBarcode = (barcode) => {
    setBarcodes([...barcodes, barcode]);
  };

  let barcodeArray = [];
  function barcodeInputToArray(params) {
    barcodeArray = params.toString().split("\n");
    barcodeArray.pop();
    return barcodeArray;
  }
  barcodeInputToArray(barcodes);
  // console.log(`${fetchRelease}${element}`)
  
  barcodeArray.map((element) => {
   
  });

  return (
    <>
      <Form addBarcode={addBarcode} />
      <div></div>
    </>
    // <div>
    //   <ul>
    //     <li className="flex">
    //       <div>
    //         <p>{barcode}</p>
    //       </div>
    //       <div>
    //         <p>{results.results && results.results[0].title.split(" - ").shift()}</p>
    //       </div>
    //       <div>
    //         <p>{results.results && results.results[0].title.split(" - ").pop()}</p>
    //       </div>
    //       <div>
    //         <p>{results.results && results.results[0].catno}</p>
    //       </div>
    //       <div>
    //         <p>{results.results && results.results[0].genre[0]}</p>
    //       </div>
    //       <div>
    //         <p>{results.results && results.results[0].year}</p>
    //       </div>
    //     </li>
    //   </ul>
    // </div>
  );
}

And here is the form component

import { useState } from "react";

export default function Form({ addBarcode }) {
  const [message, setMessage] = useState("");

  const handleMessageChange = (event) => {
    // ️ access textarea value
    setMessage(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    addBarcode(message);
    setMessage("");
  };

  return (
    <>
      <div className="form">
        <form onSubmit={handleSubmit}>
          <label htmlFor="barcodes">Barcodes</label>
          <textarea
            id="barcodes"
            name="barcodes"
            value={message}
            onChange={handleMessageChange}
            rows="20"
            column="30"
          />
          <button>Submit</button>
        </form>
      </div>
    </>
  );
}

I'm learning to code, and this is a small tool I'm trying to work out for my current job (record store), any help would be really appreciated.

next.js
0 Answers
Related