How to Build a Simple Product List in React Using Odoo API

Technical

Are you trying to connect your React frontend to Odoo and fetch a list of products? In this beginner-friendly tutorial, we’ll walk you through:

1. Creating a REST API endpoint in Odoo using a custom controller

2. Connecting your React app to the Odoo API

3. Displaying the product list in a simple UI

Step 1: Create a Custom Odoo API

We’ll expose a product list via a REST API by creating a custom controller inside an Odoo module.

Module Structure

Inside your Odoo addons folder, create a new module named product_api.

product_api/
+-- __init__.py
+-- __manifest__.py
+-- controllers/
    +-- __init__.py
    +-- product_controller.py

Manifest File

Create the __manifest__.py file:

{
    'name': 'Product API',
    'version': '1.0',
    'summary': 'Exposes product list via REST API',
    'depends': ['base', 'product'],
    'data': [],
    'installable': True,
}

Controller to Return Products

Here’s your working controller that returns product name and price using a standard HTTP GET route:

# controllers/product_controller.py
import json
from odoo import http
from odoo.http import request, Response
class ProductController(http.Controller):
    @http.route('/api/products', auth='public', type='http', methods=['GET'], csrf=False, cors="*")
    def get_products(self):
        """
        Returns a list of all products with their name and price.
        """
        products = request.env['product.product'].sudo().search_read(
            [], ['name', 'list_price']
        )
        return Response(
            json.dumps(products),
            content_type='application/json',
            status=200
        )

This:

* Creates a GET route /api/products

* Returns a list of all products with name and list_price

* Outputs JSON with CORS enabled (for frontend access)

Note: Restart your Odoo server and update the module after making these changes:

./odoo-bin -u product_api -d your_database_name

Step 2: Fetch Products in React

Now that the API is live, let’s connect it to a simple React app.

Create the React App

If you don’t already have one:

npx create-react-app odoo-product-list
cd odoo-product-list
npm start

Build the ProductList Component

Create a new file: src/ProductList.js

import React, { useEffect, useState } from 'react';
function ProductList() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch('/api/products')
      .then(response => response.json())
      .then(data => setProducts(data))
      .catch(err => console.error('Error fetching products:', err));
  }, []);
  return (
    <div style={{ padding: '2rem' }}>
      <h2>?? Product List</h2>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {products.map(product => (
          <li
            key={product.id}
            style={{
              border: '1px solid #ddd',
              marginBottom: '1rem',
              padding: '1rem',
              borderRadius: '8px',
            }}
          >
            <strong>{product.name}</strong> - ${product.list_price.toFixed(2)}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default ProductList;

Use It in App.js

import React from 'react';
import ProductList from './ProductList';
function App() {
  return (
    <div className="App">
      <ProductList />
    </div>
  );
}
export default App;