Understanding React Props
Tags: react, javascript, tutorial, beginners
Published: 2021-09-27 16:57:03

React props allow us pass attributes to from one component to another component. props stand for **properties**. We can create two identical components are pass them different props. That way, we create two instances from one component.


```js
function Child() {
   return <p> I am a boy</p> 
}
```

``` js

// import child

function Parent() {
  return (
  <div>
      <Child />
      <Child />
  </div>
   )
}

// translates to

function Parent() {
  return (
  <div>
       <p> I am a boy </p>
       <p> I am a boy </p>
  </div>
   )
}
```

### Create variations of the same component using props
We can create two different versions of `Child` by simply assigning different props to the two children, thereby creating two instances.

```js
function Child(props) {
   return <h1> I am a {props.gender} </h1> 
}
```

Now we can do this

```js

// import child

function Parent() {
  return (
   <div>
      <Child gender="boy"/>
      <Child gender="girl"/>
   </div>
   )
}

// translates to

function Parent() {
  return (
  <div>
     <h1> I am a boy </h1>
     <h1> I am a girl </h1>
  </div>
   )
}
```

- The child functional component must always use the 'props' parameter. Without passing this parameter, you can access any props from a parent.


### Using props with class components

`props` can also be used in class-based React components.

```js
import {Component} from 'react'


class Child extends Component {
   render() {
   return <h1> I am a {this.props.gender}</h1> 
 }
}

```
The Child component will now receive props from the Parent component. 

```js
import Child from './child'

class Parent extends Component {
   render() {
   return (
     <div>  
      <Child gender="male" />
      <Child gender="female" />
    </div>
) }
}

// translates to

class Parent extends Component {
render() {
 return (
     <div>  
      <h1> I am a male</h1> 
      <h1> I am a female</h1>
    </div>
) }
}
```

#### Supplying props from a class method

You can supply props into a child component by calling a method.

```js
class Parent extends Component {
getBoy() {
   return "boy"
}

getGirl() {
   return "girl"
}

render() {
 return (
     <div>  
      <Child gender={this.getBoy} />
      <Child gender={this.getGirl} />
    </div>
) }
}
```

### Setting default props
Set default value for the props argument. That way if a prop value is omitted from parent, you can use the default value instead.

```js
function Child({gender = 'male'}) {
   return <h1> I am a {gender} </h1> 
}
```

```js
// import child

function Parent() {
 return (
  <div>
      <Child /> // omitted
      <Child gender="female" />
  </div>
   )
}


// translates to

function Parent() {
 return (
  <div>
      <h1> I am a male</h1> 
      <h1> I am a female</h1>
  </div>
   )
}
```

### Using spread syntax with props
You can also pass in an object as props to a component using the spread syntax.

```js
let details = { name: "kingsley", gender: "boy"}

function Parent() {
  return (
  <div>
      <Child gender={...details} /> // My name is kingsley and I am a boy
  </div>
   )
}
```

When then access each individual properties using object destructuring

```js
function Child({name, gender}) {
   return <h1> My name is {name} and I am a {gender} </h1> 
}
```


### Wrapping Up
React props allow us pass data into React components. React props should only be passed from a reference (such as parent component). Data from props can be accessed by child and then displayed on the view (template).

### Join my newsletter

![testimonial from subscriber](https://cdn.hashnode.com/res/hashnode/image/upload/v1632760933679/nCygke_co.png)

I release weekly newsletter on how to grow a strong mindset and succeed as a web developer. Subscribe  [here](https://www.getrevue.co/profile/ubahthebuilder).