Hey fellow creators,
You're not sure what React Props are for? You've come to the right place!
If you prefer to watch the video version, it's right here :
Check out the source code here.
1. The basic structures of your files.
Create a simple React app with one App.js and one Child element with a paragraph.
Here's what your Child element should look like:
import React from "react";
export default function child() {
return (
<div className="child-box">
<p>CHILD</p>
</div>
);
}
Then go to your App file and import your Child element:
import Child from "./Child";
function App() {
return (
<div className="App">
<Child
/>
</div>
);
}
export default App;
2. What are Props?
Props stands for properties. It's basically data that you can pass from parents to children.
Here, the parent is App and the child is Child.
So to do it you can add properties to your child, for instance a name which will be a string (but it can be called whatever you want and have different values, which we'll see later):
function App() {
return (
<div className="App">
<Child
name={"Enzo"}
/>
</div>
);
}
Which you can then retrieve in the Child element:
import React from "react";
export default function child(props) {
console.log(props);
return (
<div className="child-box">
<p>{name}</p>
);
}
You can log it to see what's going in your console. You'll see that you have an object, which is a prop object, in which you'll have the name you've entered.
First, you need to say that you'll receive some props in your Child element and then you need to give those props in your Parent element. That means that you can also use it! You just have to open your curly braces:
import React from "react";
export default function child(props) {
return (
<div className="child-box">
<p>{props.name}</p>
);
}
3. What else can you put besides strings as values of your props?
Instead of strings, your props could also be numbers for instance :
function App() {
return (
<div className="App">
<Child
name={99}
/>
</div>
);
}
You could also have an array:
function App() {
return (
<div className="App">
<Child
name={[1, 2, 3]}
/>
</div>
);
}
As well as an object:
function App() {
return (
<div className="App">
<Child
name={{a: 5}}
/>
</div>
);
}
Since you have an object within an object, you'll have nothing for now because you'll need to change your Child.js file:
import React from "react";
export default function child(props) {
return (
<div className="child-box">
<p>{props.name.a}</p>
);
}
Now it's working!
4. Your element can have multiple props!
You can also put multiple props! Let's add some:
function App() {
return (
<div className="App">
<Child
name={"John"}
id={99}
txt={"Lorem ipsum"}
/>
</div>
);
}
Since you have multiple properties in your object, you can now use them in your element:
import React from "react";
export default function child(props) {
return (
<div className="child-box">
<p>{props.name}</p>
<p>{props.id}</p>
<p>{props.txt}</p>
</div>
);
}
Sometimes however you'll see different syntax, a destructuring in the parameter. It can look strange, but it is actually useful! Here's how you do it:
import React from "react";
export default function child({name,id,txt}) {
return (
<div className="child-box">
<p>{name}</p>
<p>{id}</p>
<p>{txt}</p>
</div>
);
);
}
Since you have the properties inside of the parameter, you no longer need to have props. before the name of the props.
5. Pass some function to the props!
You can also pass some function to the properties! It's a very common thing to do, since in a Parent element you'll have all the data and the logic.
Let's see how you can do it! Let's add one in your App element:
function App() {
const deleteElement = id => {
console.log("Delete", id);
}
return (
<div className="App">
<Child
name={"John"}
id={99}
txt={"Lorem ipsum"}
/>
</div>
);
}
Now let's create a button in your Child element:
import React from "react";
export default function child({name,id,txt,deleteFunc}) {
return (
<div className="child-box">
<p>{name}</p>
<p>{id}</p>
<p>{txt}</p>
<button
onClick={() => deleteFunc(id)}>
X
</button>
</div>
);
}
You need to use an anonymous function since you want to call that function with an argument (here, the argument is id) and since you want it to happen not when the component is mounted (which would happen if you just write: onClick={deleteFunc(id)}) but when you click on the button.
Now however you need to add that prop to the Parent element:
return (
<div className="App">
<Child
name={"John"}
id={99}
txt={"Lorem ipsum"}
deleteFunc={deleteElement()}
/>
</div>
);
You now have a button. If you click on it, it'll trigger that function!
It's pretty useful since you usually have lists with React, which means you return a lot of elements with the .map() method.
import Child from "./Child";
function App() {
const deleteElement = (id) => {
console.log("Delete", id);
};
return (
<div className="App">
<Child
name={"John"}
id={100}
txt={"Lorem ipsum"}
deleteFunc={deleteElement}
/>
<Child
name={"John"}
id={99}
txt={"Lorem ipsum"}
deleteFunc={deleteElement}
/>
<Child
name={"John"}
id={98}
txt={"Lorem ipsum"}
deleteFunc={deleteElement}
/>
</div>
);
}
export default App;
As you can see, now that you have several elements, if you click on the button of one element, it'll delete the one with the corresponding id (you can check in your console!).
You now know how to use props with React, how fun!
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
Have fun looking at my other tutorials!
Enzo.
Top comments (0)