2
  • I am new to React.
  • I am able to display a table component with hard code data.
  • But right now I have all the data in table.json.
  • Can you tell me how to fetch the values from table.json using axios get request and display in table?
  • It would be great if you let me know so that in future I can work on API requests.
  • Providing my stackblitz and code below.

https://stackblitz.com/edit/react-redux-realworld-sqwnsm?file=components/Sports/index.js

class EnhancedTable extends React.Component {
  state = {
    id: 1,
    order: 'asc',
    orderBy: 'order',
    selected: [],
    data: [
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
    ],
    page: 0,
    rowsPerPage: 5,
  };

json data

[
  {
    "name": "Cupcake",
    "shortname": "shortname",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  },
  {
    "name": "Cupcake2",
    "shortname": "shortname2",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  }
]
Improve this question

1 Answer 1

Reset to default
3

Here is a complete example using fetch (instead of axios) to send a get request to https://randomuser.me/

import React, { Component } from 'react';

class App extends Component {
  state = { users: [] };

  componentDidMount() {
    fetch('https://randomuser.me/api/?results=10&nat=us')
      .then(results => results.json())
      .then(data => {
        const users = data.results;
        this.setState({ users });
      }).catch(err => console.log(err))
  }

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <div key={index}>
              <div>{user.name.first}</div>
              <img src={user.picture.thumbnail} alt="" />
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

And here is link to a working example: https://stackblitz.com/edit/react-azxxut

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

thanks for your reply...can you update in my code...its so confusing :(
hey is there any sample api for put in random api...since I need to test for put
can you demonstrate a put in my sandbox...its so confusing :(
can you please help :(
hey but I dont see post in that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.