reactjs/components.js at master · trandung2k1/reactjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const root = ReactDOM.createRoot(document.getElementById('root'));
const Header = () => {
    return (
        <div>
            <h1>Header</h1>
        </div>
    );
};

class Content extends React.Component {
    render() {
        return (
            <div>
                <h1>Content</h1>
            </div>
        );
    }
}

const app = (
    <div>
        <Header />
        <Content />
    </div>
);

// const PostItem = (props) => {
//     if (typeof props.callback === 'function') {
//         props.callback(Math.floor(Math.random() * 100));
//     }
//     if (typeof props.randomNumber === 'function') {
//         props.randomNumber(Math.floor(Math.random() * 100));
//     }
//     return (
//         <div className="post-list">
//             <img src={props.image} alt={props.title} />
//             <h2 className="post-title">{props.title}</h2>
//             <p className="post-desc">{props.description}</p>
//             <p className="post-published">{props.publishedAt}</p>
//         </div>
//     );
// };

//using destructuring and default value
const PostItem = ({
    title,
    image,
    description,
    publishedAt,
    randomNumber = () => {},
    callback = () => {},
}) => {
    callback(Math.floor(Math.random() * 100));
    randomNumber(Math.floor(Math.random() * 100));
    return (
        <div className="post-list">
            <img src={image} alt={title} />
            <h2 className="post-title">{title}</h2>
            <p className="post-desc">{description}</p>
            <p className="post-published">{publishedAt}</p>
        </div>
    );
};
function App() {
    const handleRandom = (number) => {
        console.log(number);
    };
    return (
        <div>
            <PostItem
                image="https://files.fullstack.edu.vn/f8-prod/blog_posts/311/6147eea9cef9c.png"
                title="C#(.NET) - Tương tác với file Excel"
                description="Bạn có kiến thức C#!Bạn muốn thực hiện với file excel"
                publishedAt="Một ngày trước - 5 phút đọc"
                callback={(random) => {
                    console.log(random);
                }}
                randomNumber={handleRandom}
            />
        </div>
    );
}
// console.log(app);

root.render(<App />);