seo Question posted in
Some basic information to get you started with this can be found here.

How do I loop through the Axios response to a table in React – SEO

I am trying to develop a mini project that retrieves the list of available listed jobs in React and Node as Backend. Little bit stuck at the response from the axios.
This is the response am getting from the axios response.enter image description here

I want to display the array data into a table or list to show available jobs

Below is the code for that retrieves the data

import React, {  useState, useEffect } from 'react'
import Layout from '../../core/Layout'
import axios from 'axios'
import {  getCookie, isAuth, signout } from '../../auth/helpers';


const Find = () => {

  const [values, setValues] = useState({
    title:"",
    duration:"",
    durationSys:"",
    budget:'',
    addedBy:'',
     category:'',
     results:[],
     searched: false

      });


     const {  category} = values;
    const token = getCookie('token');
    const handleChange = category => event => {
     console.log(event.target.value);
     setValues({ ...values, [category]: event.target.value});
    };

    const handleClick = event =>{
      event.preventDefault()
    listJobs()
    }

   const listJobs = () =>{
    axios.get( `${process.env.REACT_APP_API}/search-projects`,
    {params: {category
  }
 })
   .then(response => {
    console.log('LOG SUCCESS --', response.data);
    const data = response.data;
   setValues({...values, results: data})
   console.log('LOG STATE', data)
    })

  }


   return (
  <Layout>
       <div class="form-group">
            <label for="exampleFormControlSelect1">Category</label>
            <select onChange={handleChange('category')}  value={category} class="form-control" 
          id="exampleFormControlSelect1">
            <option>--Select Category --</option>
            <option value='Web Development'>Web Development</option>
            <option value='Logo Design'>Logo Design</option>
            <option value='Writing/Skills'>Writing/Skills</option>
            <option value='Mobile App Development'>Mobile App Development</option>
            <option value='SEO/Marketing'>SEO/Marketing</option>
            </select>
        </div>
        <div class="d-flex justify-content-center">
        <button onClick={handleClick} class="btn btn-default btn-info" style={{marginBottom: "15px"}}>Search</button>
        </div>
        <div>
          <h5>List of available jobs</h5>
            //here
        </div>

  </Layout>
)
  }


  export default Find;
Tags:

2

Answers


  1. 0

    Hi you can do something like this.

    <ul>
 (results || []).map((item, index) => <li key={index}> {item}</li>
</ul>

    I would also suggest to convert your handleChange function ( and the rest ) to useCallback functions to reduce unnecessary updates.

    Login or Signup to reply.
  2. 0

    Suppose job has some id, title and description:

     { results.map(( job, index ) => {
              return (
                <tr key={job.id}>
                  <td>{job.id}</td>
                  <td>{job.title}</td>
                  <td>{job.description}</td>
                </tr>
              );
    })}

    Or destructing:

    { results.map(({id, title, description}, index ) => {
                  return (
                    <tr key={id}>
                      <td>{id}</td>
                      <td>{jtitle}</td>
                      <td>{description}</td>
                    </tr>
                  );
        })}

    more info: https://flaviocopes.com/react-how-to-loop/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search