What are React Props?
Tags: react, javascript, tutorial
Published: 2021-11-22 07:24:25

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 :

{%youtube ZXiGUebwgGs%}

Check out the source code  [here](https://github.com/Ziratsu/react-props).

##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:

```react
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:

```react
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):

```react
function App() {
  
  return (
    <div className="App">
      <Child
	name={"Enzo"}
      />
    </div>
  );
}
``` 

Which you can then retrieve in the Child element:

```react
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:

```react
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 :

```react
function App() {
  
  return (
    <div className="App">
      <Child
	name={99}
      />
    </div>
  );
}
```

You could also have an array:
```react
function App() {
  
  return (
    <div className="App">
      <Child
	name={[1, 2, 3]}
      />
    </div>
  );
}
```

As well as an object:
```react
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:

```react
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:

```react
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:

```react
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:

```react
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:

```react

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:

```react
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:
```react
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.

```react
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.