React Component Props example
react
38
component
5
Props
1
Male avatar

loveprogramming viết ngày 20/05/2021

https://grokonez.com/frontend/react/react-component-props-example

React Component Props example

In this tutorial, we're gonna look at how to use React Component Props in a React example.

Related Posts:

I. React Component Props

When we need to pass immutable data to a component, we use props.

1. Props with Class Component

We use this syntax to pass data as a props element to a class template:

<MyClass element={data} />

To get data from props, use this.props.data.
For example:

class NoteApp extends React.Component {
    render() {
        const jsaDescription = {
            'd1': 'Java/JavaScript Technology',
            'd2': 'Spring Framework'
        }

        return (
            <div>
                <Header description={jsaDescription} />
            </div>
        );
    }
}

class Header extends React.Component {
    render() {
        return <h4>{this.props.description.d1} - {this.props.description.d2}</h4>;
    }
}

2. Props with Function

class NoteApp extends React.Component {
    render() {
        const jsaTitle = 'Java Sample Approach';

        return (
            <div>
                <Title title={jsaTitle} />
            </div>
        );
    }
}

function Title(props) {
    return <h2>{props.title}</h2>;
}

II. Practice

1. Overview

react-component-props-example-overview

Using props, we will pass:

  • title to Title element
  • description to Header component
  • notes array to Notes component, then each item of notes array to each Note component

More at:

https://grokonez.com/frontend/react/react-component-props-example

React Component Props example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://ozenero.com/howtoadddialogcomponenttovuejsapp In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App. Demo ...
loveprogramming viết 6 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/angular/createnewangular4componentmultiplecomponents Create a new Angular 4 Component – Multiple Components Angular ...
loveprogramming viết 4 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!