display axios data through map in react table

Question

I am trying to display data from axios in a table but it is not displaying I am quite new to react can you please help. Below is my code:

export default function ProjectList(props) {

  const [projectList, setProjectList] = useState([])

  useEffect(() => {
    refreshProjectList();
  }, [])

  function refreshProjectList() {
    const ProjectAPI = axios.get('https://localhost:7055/api/Projects')
      .then(res => setProjectList(res.data))
      .catch(err => console.log(err))
  }

  return (
    <div>
    <table className = 'table table-success table-striped table-hover table-boredered' >
    <thead >
        <tr>
        <th scope='col'>ProjectName</th> 
        <th scope='col'>GithubLink</th>
        <th scope='col'>URLLink</th>
        <th scope='col'> ImageName</th>
        <th scope='col'>ImageName</th>
        <th scope='col'>Action</th>    
        </tr>
    </thead>
    
    <tbody >
    {
      [...Array((projectList.length))].map((e, i) =>
        <tr key={i}>
            <td>{projectList.value1}</td>
          <td>{projectList.value2}</td>
          <td>{projectList.value3}</td>
          <td>{projectList.value4}</td>
          <td>{projectList.value5}</td>
          <td>{projectList.value6}</td>
        </tr>  
      )
    }
    </tbody> 
    </table>
    </div>
  )
}

Answer 1

You don't seem to be mapping on your state array. Change your map for this and it should work :

{
projectList.map((project,idx) => (
  <tr key={i}>
    <td>{project.value1}</td>
    ...
  </tr>
  ))
}

If be any chance your map syntax actually works, (i've never seen it before) the problem is probably that you need to do :

e.value1

instead of

projectList.value1

I would also recommended you use the map syntax in my code exemple, since its the common way to do it and it his more readable.