Categories

Saturday, October 5, 2024
#919814419350 therichposts@gmail.com
Bootstrap 5ReactjsReactjs Tutorial

Reactjs Share Data Between Components with PROPS

Reactjs Share Data Between Components with PROPS

Hello friends, welcome again on my blog therichpost.com. Today in this post, I will tell you, Reactjs Share Data Between Components with PROPS.

Here friends, for live working example please check the below video:

Working Demo
Reactjs Share Data Between Components with PROPS
Reactjs Share Data Between Components with PROPS

For Reactjs new comers, please check below link:

  1. Reactjs Basic
  2. ReactJS Tutorial

Here is the code snippet and please follow carefully:

1. Firstly friends we need fresh react set up and for this, we need to run below commands into our terminal or if you already have then no need for this step. Importantly we should have latest node version installed on our system:

npx create-react-app therichpost

cd therichpost

npm start //this will make project run on browser http://localhost:3000/

2. Now friends we need to run below commands into our project terminal to get bootstrap and its dependencies:

npm install bootstrap --save

npm i @popperjs/core

npm start

3. Now friends we are done with commands, now please open therichpost/src/App.js file and add below code inside it:

import React from 'react';

import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import About from './About';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    DataShare : "JassaS."
   
}

 }
  render(){
  return (
    <div className="MainDiv">
   
        
        <div className="container">
        
            <About parentToChild={this.state.DataShare} />
          
        </div>
      </div>
  );
}
}
export default App;

4. Now guys create new file About.js fine inside therichpost/src folder and add below code inside it:

import React from 'react';

class About extends React.Component {
   
render() {
  return (
    <h2>{ this.props.parentToChild }</h2>
  );
  
}

}
export default About;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post.Nothing matters if your views will good or bad.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.