Hi, guys, welcome back to Appsloveworld. In our previous article, we learned about React Js components in detail. And now moving ahead, let’s learn about another feature of React Js called Props.
What does props mean in react?
- Props short for properties. Allow the user to pass arguments or data to components. A parent component can pass additional information to its children using props.
- Properties help make components more dynamic. Props are passed to components in a way similar to that of HTML-Tag attributes.
Can we change the value of props in react?
- No,Props in components are read-only and cannot be changed. Props are sent by the parent to the children components. Hence the children’s components cannot make any changes to these props.
Now that we’ve learned about props, in brief, let’s go ahead and create an application using props. If you are new to this tutorial, I suggest you go to the react installation and react components post and read it.
so back in my code editor, that is VS Code. I opened a folder called ‘MyApp‘.
Now I’m going to create a class component and I’ll call it Myclasscomp.js . So let’s create the class component.
Here I display a message saying that “Hello this is class Component”.
import React, { Component } from "react"; class Myclasscomp extends Component { render() { return <b>Hello this is class Component</b> } } export default Myclasscomp;
Now, let me import this component in my app.js main component here, I say import Myclasscomp from “../src/components/Myclasscomp”;. Now, we defined the class component in a render method.
App.js
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>Hello, welcome to Appsloveworld</h1> <h1>React Js Tutorial</h1> <Myclasscomp/><br></br> </div> ); } export default App;
Now, if you go back to the browser, you will see our message.
Passing props from one component to another in ReactJS
Let’s say if we want to individually welcome every user. Instead of retyping the message for everybody, we can pass their names as props.
Now, let’s see how to do that?
Now, we passed the name as a property from the main Component that is, App.js to the child component and rendered this onto the browser.
So let’s do that. So here in App.js, while I’m defining my child Component, I say name=”John”.
App.js
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>Hello, welcome to Appsloveworld</h1> <h1>React Js Tutorial</h1> <Myclasscomp name="John"/><br></br> </div> ); } export default App;
And here in my child Component, I use a Keywood, {this.props.name}, for getting the value of the prop send from the parent Component.
Myclasscomp.Js
import React, { Component } from "react"; class Myclasscomp extends Component { render() { return <b>Hello {this.props.name}, this is class Component</b> } } export default Myclasscomp;
And if you look at the browser we will have “Hello John, this is class Component”.
Now let’s go ahead and welcome other students.
App.js
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> <Myclasscomp name="John"/><br></br> <Myclasscomp name="Marry"/><br></br> <Myclasscomp name="Jacob"/><br></br> </div> ); }
All right, so if we save and look at the browser, we’ll have all the students displayed on the browser.
How to Pass multiple props to React component
We can also pass multiple props to the child component. Now, say, for example, we want to welcome the student from a particular Country.
So we say Welcome student one from Country X. So I can defining another property, say country in the App.js, .
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> <Myclasscomp name="John" country="USA"/><br></br> <Myclasscomp name="Marry" country="UK"/><br></br> <Myclasscomp name="Jacob" country="France"/><br></br> </div> ); } export default App;
Now, let’s go back to our child component and use this country props.
import React, { Component } from "react"; class Myclasscomp extends Component { render() { return <b>Hello {this.props.name} from {this.props.country} ,welcome to React Js Tutorial</b> } } export default Myclasscomp;
And if you look at the browser now, we have All text.
What is props.children and when you should use it?
We can also display whatever we want between the opening and closing tags when invoking a component. Now, this is facilitated using props.children reserve keyword. Now, let me explain to you how it’s done with an example here.
Let’s split the self and closing tag into an opening and closing tag. And in between them, let me display a message within the <span> tag.
App.js
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> <Myclasscomp name="John" country="USA"> <span>please ask if you have any query</span> </Myclasscomp><br></br> <Myclasscomp name="Marry" country="UK"/><br></br> <Myclasscomp name="Jacob" country="France"/><br></br> </div> ); } export default App;
And in my child Component after my <b>, tag let me use a span tag, and here let’s use the reserved Keywood, props.children.
import React, { Component } from "react"; class Myclasscomp extends Component { render() { debugger; //var name=this.props.name; return <b>Hello {this.props.name} from {this.props.country} ,welcome to React Js Tutorial <br></br> <span>{this.props.children}</span> </b> } } export default Myclasscomp;
So let’s save it and now if you look at the browser, you can see the message
So {props.children} Can be used when components do not know about their children ahead of time. This is commonly seen in competent like sidebar and dialogue that represent generic boxes.
So let’s go ahead and create a button tag and check again. So here, I’ll split it and add a button tag. And let’s check out the browser.
App.js
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> <Myclasscomp name="John" country="USA"> <span>please ask if you have any query</span> </Myclasscomp><br></br> <Myclasscomp name="Marry" country="UK"> <button>Click Me!</button> </Myclasscomp><br></br> <Myclasscomp name="Jacob" country="France"/><br></br> </div> ); } export default App;
Here we go. We get the output as expected.
Pass props to a stateless functional component
We saw the usage of props for class components. Similarly, we can use it for functional components. So let’s go ahead and create a functional component.
Let me call it Myfunctionalcomp.js
import React from 'react' function Myfunctionalcomp() { return <b>Hello this is functional Component</b> } export default Myfunctionalcomp;
let’s import it in our App.js again,
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; import Myfunctionalcomp from "../src/components/Myfunctionalcomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> {/*Function Component */} <Myfunctionalcomp > </Myfunctionalcomp><br></br> {/*Class Component */} <Myclasscomp name="John" country="USA"> <span>please ask if you have any query</span> </Myclasscomp><br></br> <Myclasscomp name="Marry" country="UK"> <button>Click Me!</button> </Myclasscomp><br></br> <Myclasscomp name="Jacob" country="France" /><br></br> </div> ); } export default App;
let’s pass name and country also using props.
import logo from './logo.svg'; import './App.css'; import Myclasscomp from "../src/components/Myclasscomp"; import Myfunctionalcomp from "../src/components/Myfunctionalcomp"; function App() { return ( <div> <h1>React Js Tutorial</h1> {/*Function Component */} <Myfunctionalcomp name="Marry" country="UK"> </Myfunctionalcomp><br></br> {/*Class Component */} <Myclasscomp name="John" country="USA"> <span>please ask if you have any query</span> </Myclasscomp><br></br> <Myclasscomp name="Marry" country="UK"> <button>Click Me!</button> </Myclasscomp><br></br> <Myclasscomp name="Jacob" country="France" /><br></br> </div> ); } export default App;
and in my child functional competent write below code
import React from 'react' function Myfunctionalcomp(props) { return <b>Hello {props.name} from {props.country} ,this is functional Component</b> } export default Myfunctionalcomp;
In our upcoming post, you’ll learn more about props and how they’re used. Thanks for reading post.
The post How to Pass Data From One Component To Another In React Js appeared first on Software Development | Programming Tutorials.
Read More Articles
- How to pass data from one component to another in React or React-Redux?
- How to pass data from one component to another ReactJS
- How to pass data from one component to another while using API in reactjs
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- How to pass data from a page to another page using react router
- How to pass data from child component to its parent in ReactJS?
- How to pass in a react component into another react component to transclude the first component's content?
- React - how to pass state to another component
- How to access one component's state from another component
- how to navigate from one page to another in react js?
- Is there a right way to pass data into a React component from the HTML page?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How to pass a state className variable to another component in react
- How to get refs from another component in React JS
- How to pass the match when using render in Route component from react router (v4)
- How to update the state of a sibling component from another sibling or imported component in REACT
- How to pass in an instance variable from a React component to its HOC?
- How to pass props from one class to another in React.js
- How can I pass data from express server to react views?
- How to replace a component with another one upon event (button click) in react js
- React - toggle display of one component from the onClick of another component
- how to send value one component to another component in react js?
- Animate movement of React component from one to another
- React | pass data from parent to child component
- How do i pass data up from a child web component to it's direct parent element
- How can I use react useContext , to show data from context, in the same component
- How to pass input value from child to parent component react
- How to activate a react route and pass data from the service worker?
- Accessing the data from one component to another component
- How do I call/execute a function from another component in react native?
- react-native-webview load a local HTML file but got plain text
- Render Props vs HOC?
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- Cannot remove Material-ui TextField margin
- How to access the Redux store outside of a component in React
- How to loop over a number in React inside JSX
- How to use PropTypes.shape with Typescript
- Test return value of function with Jest in React
- Use NPM package in React Component
- CSS' calc() in styled-components
- React.js: Will multiple async setState method calls always re-render after and impact performance?
- How can I detect/avoid updates to my cached React-based App? Or how can I detect a cache-invalidation before it happens?
- Rendering JSON API in react Using map method
- How to implement a scrollspy in react native with ScrollView?
- React-router: IndexRoute vs DefaultRoute
- React Hook Form - Resetting "isDirty" without clearing form?
- Highlight line in react-syntax-highlighter
- React - change input defaultValue by passing props
- Reactjs routing causing page render issues
- Only use the CSS of Material UI React Components