React Component Props example » grokonez

React Component Props example » grokonez

How to use React Component Props in a React example - React Component Props example

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 (
        &lt;div&gt;
            &lt;Header description={jsaDescription} /&gt;
        &lt;/div&gt;
    );
}

}

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 (
        &lt;div&gt;
            &lt;Title title={jsaTitle} /&gt;
        &lt;/div&gt;
    );
}

}

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

react component props

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Props In React JS

In place of a big structure what we can do is make one common structure and then pass information in some way that we don’t have to create so many div’s. Here, comes the need for props in React JS.

 Component Life Cycle in React

Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the…

How to Build React Component using React, React DOM and Babel

Now Let’s start discussing today’s topic.Today we’ll discuss about basic things you must know about React Library.It’s a famous front-end library which use in IT industry for business applications.Also day by day it’s getting updated.So, It will be much important for you to keep in touch with this library if you are willing/doing a job in IT industry as it’s already a trending front-end technology now a days.So we’ll discuss it in details now and create your first React Component.

How To Avoid Prop Drilling in React Using Component Composition

Prop Drilling is the process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around.