What is "props"?

Happy new year to everyone reading this, hope everyone had a great holiday. Today i'll explain what props are in React. Props are basically values a component expects to be given. So a component A for instance could have a name property and it could want to share that name with another component B so component B so component B "expects" a property named name. I do have to point out that props actually is a huge object with different elements in it like history, React gives us but I'm only covering props in relation to value we explicitly pass down. So time for an example. I'll create two components First and Second and in the First we have a form, we get the value from the input element and update Second in real-time. I'll use both class based and Hooks.

//class based 
import React, {Component} from "react";
import Second from "file path";
class First extends Component {
state = {
name: null
};
render (){
return (
<div>
<form>
<input type="text" placeholder="required" onChange={e=> this.setState({name: e.target.value})} />
</form>
<Second expectedName={this.state.name}/>
<div>)
}
}
export default First;

//Second component
import React from "react";
const Second = props => props.expectedName !==null ? <div>my name is {props.expectedName} </div>: <div>Input data please</div>;
export default Second;

Okay so in the First component we have a state object, a form and an input. On the input we simply call setState onChange to capture the value and this by the way is what allows the "real-time" updating of the app. When we render the Second component in our JSX code we pass on the expectedName property and I opted to go with expectedName instead of "name" to show that the property you pass onto the rendered component is the property the rendered component expects (here Second component expects expectedName so we have to pass that on and also so the names do not clash and you think it has to be the same name as what is in your state. The Second component is simply a dumb functional component and all it does is conditionally render some JSX to output the expectedName if it is not null (so if the user has started typing). I also want to point out before I show how it would be done with Hooks, that it is very possible to use object destructuring to pull out expectedName and it is infact quite common and I will show that in the Hooks example below.

// Hooks 
import React, {useState} from "react";
import Second from "file path";
const First = () => {
const [name,setName]= useState(null);
return (
<div>
<form>
<input type="text" placeholder="required" onChange={e=> setName(e.target.value) />
</form>
<Second expectedName={name}/>
<div>)
}
export default First

//Second component
import React from "react";
const Second = ({expectedName})=> expectedName !==null ? <div>my name is {expectedName} </div>: <div>Input data please</div>;
export default Second;

The above example is effectively the same as the class based example expect it's using React Hooks which basically allows functional components to handle state. I also use object destructuring to pull out the value I needed.

I hope this clears props up for someone and if anyone has a question you can leave a comment or send me a DM on twitter, my username is glamboyosa.