How to use axios inside component in react

See more:

Javascript

Typescript

Hi Team

I want to create a unique function that will return value back as data using axios and have local data as json file.But i need to call it on Sidebar.js to have access to the json file so can consume it.

What I have tried:

//Sidbar.js

<pre>import React,{Component, useEffect, useState} from 'react';
import axios from 'axios'

class Sidebar extends Component {

  // constructor.

  constructor(props) {
    super(props);
    this.state = { status: true };
  }

  render() {
    return (
      <div className="side">
      
      </div>
    );   
      
    }
  }
  
    export default Sidebar

// function for using axios

function Sidebar() {
  const [product, setProduct] = useState([]);

  useEffect(() => {
    axios
      .get("/Api/db.json")
      .then((res) => setUsers(res.data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <ul>
        {product.map((product, index) => (
          <li key={index}>
            {product.country} {product.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Sidebar;