Pass Object to Component in React Functional Components

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

  • ReactFunctionalComponents
    • public
      • images
        • thumb1.png
        • thumb2.png
        • thumb3.png
    • src
      • App.js
      • index.js
import React from 'react';

function App() {

    let product = {
        id: 'p01',
        name: 'name 1',
        price: 5,
        quantity: 6,
        status: true,
        photo: 'thumb1.gif'
    };

    return (
        <div>
            <h3>Product Info</h3>
            id: {product.id}
            <br />
            name: {product.name}
            <br/>
            status: {product.status ? 'Show' : 'Hide'}
            <br />
            price: {product.price}
            <br />
            quantity: {product.quantity}
            <br />
            total: {product.price * product.quantity}
            <br />
            <img src={'./images/' + product.photo} width="120" />
        </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