Props in React
It is very difficult not to encounter the concept of prop while we are using React. It is important that we should know this concept while we are building app in React.
We have learned state management and use of it in my previous post. Today we are going use props in React and do simple contact form with it.
Before we start, we need to learn what component is.
Component is a part or element of a larger whole. In coding we generally split up to a pieces our app. Or we want to use same code block to somewhere else in same or different project. With components we can achieve these. In fact, we have used component in the applications we have done so far.
There are two types of components in React, class component and functional component and we should start with uppercase while we are naming a component. If we not React treats them as DOM(Document Object Model) tags like
, , etc. In below we can see example of class component.import React, { Component } from “react”;
class SayHello extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return
Hello, My name is Muzaffer.
;
}
}
export default SayHello;
Class component requires render() method.
Here we see example of functional component.
import React from “react”;
const SayHello = () => {
return
Hello, My name is Muzaffer.
;
};
export default SayHello;
Props
Let’s say in our SayHello component, we want to display name dynamically, not just “Muzaffer”. We can achieve that with using state in the same component. But what if we want to send the name from a different component. The name we will send can be getting from user input or can be getting with a rest service.
To do this we use props. With props we can data transfer between components. What we need to do while doing this is to use parameters with the HTML attributes. In the following example we use name as an attribute and the “Muzaffer” as a value.
import “./App.css”;
import SayHello from “./components/SayHello”;
function App() {
return (
);
}
export default App;
Since we passed the prop, now we can use it on the SayHello component. The only thing we have to do is display it in our jsx.
import React, { Component } from “react”;
class SayHello extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return
Hello, My name is {this.props.name}.
;
}
}
export default SayHello;
In functional components;
import React from “react”;
const SayHello = (props) => {
return
Hello, My name is {props.name}.
;
};
export default SayHello;
Since we have learned to use props, now we can take a step forwad and see how we can use in form inputs as an example.
Now let’s say we have a contact form in our website and we want people to contact us with using that form. In our form we need to get following information:
- Name and Surname
- Phone
- And message.
As you can see we can think of this information that we will ask from users as a text input. So we can create a component for these inputs.
Our text input component will have three props and these are “change”, “value”, “label”. With change prop, we will pass the input’s onChange function to parent. With value prop we will send the input’s state value from parent component. And lastly label prop is going to be input’s label.
Our custom text input component will look like this:
import React from “react”;
const CustomTextInput = (props) => {
return (
{props.label}
{“:”}
);
};
export default CustomTextInput;
As you can see, we have a very simple component. In our component we have a div which wrap our label paragraph and input with type of text. And we have some inline styling for demo purposes. Now we can use our component wherever we want in our project.
We can use our component as below.
import { useState } from “react”;
import “./App.css”;
import CustomTextInput from “./components/CustomTextInput”;
import SayHello from “./components/SayHello”;
function App() {
const [contactForm, setContactForm] = useState({
name: “”,
phone: “”,
email: “”,
message: “”,
});
const changeName = (e) => {
setContactForm((prevState) => {
prevState.name = e.target.value;
return { …prevState };
});
};
const changePhone = (e) => {
setContactForm((prevState) => {
prevState.phone = e.target.value;
return { …prevState };
});
};
const changeEmail = (e) => {
setContactForm((prevState) => {
prevState.email = e.target.value;
return { …prevState };
});
};
const changeMessage = (e) => {
setContactForm((prevState) => {
prevState.message = e.target.value;
return { …prevState };
});
};
return (
);
}
export default App;
In App component, we create state that we hold our contact form inputs’ values. Then we have change functions that receives event as a parameter and set contact form state. And we pass these as props to our CustomTextInput component.
As you can see, props can be very useful when we are using React. Once you experience power of props, you want to use it more 🙂
Today I tried to explain how we can use component and props and use them in an simple contact form example. I hope my post was helpful.
I wish you have a good day.
References:
