getting data for api and creating a new react component for each entry

Question

I have the code below in React:

import '../App.css';
import '../components/styles/ManageFiles.css';
import "bootstrap/dist/css/bootstrap.min.css";
import AudioFileListItem from '../components/AudioFileListItem';
import axios from 'axios';

<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

function Manage() {

  const customer_id = 1;

  const getFiles = async (customer_id) => {
    
    var data = {
      "customer-id": customer_id
    };

    return await axios.post(`/files/get-files`, data);
    
  }

  return (
    <div className="Manage">
      <head>
        <link rel="stylesheet" href="boxicons.min.css" />
      </head>
      <div className="row" >
        <div className="col-9 mx-auto fileCollection">
          <div className="ManageHeading">
            Your active files
          </div>
          <AudioFileListItem />
        </div>
      </div>
    </div>
  );
}

export default Manage;

Essentially the goal is to create a page where I can retrieve files from a table in a database and then present each file on a screen. The axios get-files call returns something like this:

{
    "id": 3,
    "name": "Test Bob"
},
{
    "id": 4,
    "name": "The Three Little Bobs"
},
{
    "id": 5,
    "name": "Bobbt"
},
{
    "id": 6,
    "name": "Where is Bob"
},
{
    "id": 12,
    "name": "Test Bob"
}

My desired outcome is to be able to

1) Wait for the api call to finish before rendering
2) once it is done, create a new audiofilelistitem component for each file.
3) Be able to pass in the id and name of the file into the component.

I've been at this for a while now and I just have had no success. I would greatly appreciate if anyone could help me out. Thank you so so so much!

Answer 1

I don't know if you have posted full code but you need to store the data from the API in a state variable to show it and you can map over array to create same component for multiple items but you should pass a key prop that helps keep track of the generated children to update them. So here is the code that might help you

function Manage() {
  const [userFiles, setUserFiles] = useState([]);
  const [loading, setLoading] = useState(false);

  const customer_id = 1;

  const getFiles = async (customer_id) => {
    setLoading(true);

    var data = {
      "customer-id": customer_id
    };

    const res = await axios.post(`/files/get-files`, data);
    // save list of files received in a state variable
    setUserFiles(res.data);
    setLoading(false);
  };
  // uncomment below code if you already have customer id and want to
  // get data as soon as component mounts
  /* 
  useEffect(() => {
    getFiles();
  }, [])
 */

  // LoadingSpinner is a loading state component
  return (
    <div className="Manage">
      <head>
        <link rel="stylesheet" href="boxicons.min.css" />
      </head>
      <div className="row">
        <div className="col-9 mx-auto fileCollection">
          <div className="ManageHeading">Your active files</div>
          {loading ? (
            <LoadingSpinner />
          ) : (
            userFiles.map((fl) => <AudioFileListItem key={fl.id} id={fl.id} name={fl.name} />)
          )}
        </div>
      </div>
    </div>
  );
}

getting data for api and creating a new react component for each entry

Question

1 answers

solution1
1 ACCPTED 2021-07-17 18:08:09

getting data for api and creating a new react component for each entry

Question

1 answers

solution1 1 ACCPTED 2021-07-17 18:08:09

solution1
1 ACCPTED 2021-07-17 18:08:09