Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this part we will see how to use props in react, React Props stand for Properties. These read-only elements are called props in react. It’s an object that stores the value of the attributes of a tag. They work similarly to HTML attributes. It allows data to be passed from one component to another. It works in the same way as function arguments. Props can be passed to a component similar to arguments in a function.
Props cannot be modified in the component since they are read-only elements, If you want to use a prop you need to add it in render() function in your main file we have here index.js.
The simplest way to use props is to use in function:
import React from 'react';
function World(props) {
return <h1>Hello, {props.name}</h1>;
}
We have used here the function in which we have passed props as an argument for function and to use this props we will add in {} bracket like above example. Also, we can add props in class as well:
class World extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
We have done the same thing as function had, the only difference is with need to call props with ‘this’ otherwise all things are same.
App.js
import React from 'react';
function App(props)
{
return(
<>
<h2> {props.name} is the best website </h2>
</>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App name= "ReactJS Guru"/>
);
You can also set default values for props, so if you don’t pass anything, the default value replace the prop value:
import React from 'react';
function App(props)
{
return(
<>
<h2> {props.name} is the best website </h2>
</>
);
}
App.defaultProps={
name: "enter you name"
}
export default App;
To set default props values, we have to use default Props and this will contain your default props values. We have added default value for name is “enter your name”.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App/>
);
As you can see, we didn’t have added props values, so the default value will take place.
[…] React Props are an important mechanism in our application, since they read-only and immutable, the React props validation becomes a big issue because props used to transfer data from one component to another component. If the component gets wrong data, or you can say data type, then it leads to bugs or unexpected errors. Since JavaScript doesn’t have an inbuilt type checking system, developers decided to use flow, typescript type of extensions to check. […]
[…] react useImperativeHandle hook. In react, Data can be passed from parent to child component using props, which is known as unidirectional data passing. In the case of props, the parent component cannot […]
[…] earlier parts, we have learned about state and props. Now we will see difference of React State vs Props one by one, both are actually important topics […]
[…] difficulties while working with props if we are beginners in react. So today, we will learn to pass props in […]
[…] some properties like title, image source, old_price, new_price, etc. These properties are known as react props. The working of these props we will add in the Card.js […]