Pass Object List to Component in React Functional Components

This project will demonstrate how to Pass Object List to Component in React Functional Components

  • ReactFunctionalComponents
    • public
      • images
        • thumb1.png
        • thumb2.png
        • thumb3.png
    • src
      • App.css
      • App.js
      • index.js
table, tr, th, td {
    border: 1px solid black;
}
          
import React from 'react';

import './App.css';

function App() {

    let products = [
        {
            id: 'p01',
            name: 'name 1',
            price: 5,
            quantity: 6,
            status: true,
            photo: 'thumb1.gif'
        },
        {
            id: 'p02',
            name: 'name 2',
            price: 2,
            quantity: 3,
            status: false,
            photo: 'thumb2.gif'
        },
        {
            id: 'p03',
            name: 'name 3',
            price: 15,
            quantity: 16,
            status: true,
            photo: 'thumb3.gif'
        }
    ];

    return (
        <div>
            <h3>Product List</h3>
            <table>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Price</th>
                        <th>Photo</th>
                    </tr>
                </thead>
                <tbody>
                    {products.map((product, index) => {
                        return (
                            <tr>
                                <td>{index}</td>
                                <td>{product.id}</td>
                                <td>{product.name}</td>
                                <td>{product.status ? 'show' : 'hide'}</td>
                                <td>{product.price}</td>
                                <td>
                                    <img src={'./images/' + product.photo} width="120" />
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Screenshots