Props and More | Day 3
Tags: webdev, react, javascript, beginners
Published: 2022-01-02 18:41:25


### What

**`props` stands for properties.**

They are the argument passed into React Component.

 Props are passed to Component via HTML attribute.

### How

**React Props are just like the attribute in the HTML.**

To send the props into the HTML , we use the same syntax as HTML attribute.

**Like,**

```jsx
**Suppose we have a Hello 
Component which takes the name as the argument
so we can give it in this way.**

ReactDOM.render(<Hello name="Harry"/>,document.getElementById('root'));
```

**The Component receives the argument as `props` object.**

u can see that using Console.log in the render method.

**`console.log(this.props)`**

**and u can use this name as `{this.props.name}`**

### Why

We don’t want any Component which give the same Output each time we call.

**Using Props** we can make the Component more Customizable or Configurable.

**Look at the Below Example**👇

```jsx
**App.js**
class App extends React.Component{
	render(){
		return <p>Hi Everyone!</p>
	}
}
```

- **So this always give the same output whenever we use this Component.**

**With Props** 👇

```jsx
**App.js**
class App extends React.Component{
	render(){
		return <p> Hello {this.props.name} </p>
	}
}

ReactDOM.render(<App name="Rohan"/>,document.getElementById('root'));
```

Every time we pass the different name it gives us the Different Output.

**Also `props` can be used to `Pass the Data` from one Component to another.**

**Like,**

```jsx
**Suppose i have 2  Components Library and Books**

class Books extends React.Component{
	render(){
        console.log(this.props);
		return(<div>
		<h2>The Availabe Books are </h2>
		<p>{this.props.books[0]} , {this.props.books[1]} , {this.props.books[2]} </p>
		</div>)	
	}
}

class Library extends React.Component{
	render(){
		const Types = ["Adventure","Romantic","Horror"];
		return(
		<div>
		<h1>How many Types of Book do I have?</h1>
		<Books books={Types}/>
		</div>
		)
	}
}

ReactDOM.render(<Library/>,document.getElementById('root'));
```

[You can Try this on Codepen 👆](https://codepen.io/-Pro/pen/yLzKGXM)

**If u have to send a Variable or object then u have to put them inside the Curly Brackets.**

### Some Other Properties of Props →

- **Props are Immutable**
    
    Once Defined u can’t change them.
    
    **Like,**
    
    ```jsx
    **Hello.js**
    
    class Hello extends React.Component {
        render(){
            this.props.to = "Rohit";         //**This will Give Error.**
            return (
                <h1>Hello {this.props.to} form {this.props.from}</h1>
            )
        }
    }
    
    ReactDOM.render(<Hello/>,document.getElementById('root'))
    ```
    
- **Passing Different types of Data using Props.**

```jsx
class App extends React.Component{
	render(){
		return(
			<User 
			name="Ringo"           //**A String**
			isMarried={true}       //**Boolean**
			age={16}               **//Number (Child Marriage case Reported🤣)**
			hobbies={['Reading','Playing Golf']}   **//An Array**
			/>
		)
	}
}
```

### Looping in JSX

![Looping in JSX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/081pd4y2fglbn0gbt6gz.png)

- **To use the Loops in JSX we Mostly use the `Array Map Function`.**
    - **map() calls a function once for each element in an array.**
    - **Syntax → `array.map(function())`**

**Example →**

```jsx
class Books extends React.Component{
	render(){
        const{books} = this.props;
		return(<div>
		<h2>The Availabe Books are </h2>
        <ul>
            {books.map(m=> <li>{m}</li>)}
        </ul>
		</div>)	
	}
}

class Library extends React.Component{
	render(){
		const Types = ["Adventure","Romantic","Horror"];
		return(
		<div>
		<h1>How many Types of Book do I have?</h1>
		<Books books={Types}/>
		</div>
		)
	}
}

ReactDOM.render(<Library/>,document.getElementById('root'));
```

### Adding default Props ⇒


![Default Props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fek31kjfo1fc2xdriazo.png)

To add the default props we have to use a keyword called **`defaultProps`.**

```jsx
class User extends React.Component{
	static defaultProps = {
		name:"Paul",
		hobbies:["watching tv","cooking"]
	}
	render(){
		return(
		{/* Code */}
		)
	}
}
```

### Styling In React

- **For Styling u can either use the Stylesheet or Inline-CSS**

**Using Stylesheet**

```jsx
style.css

.red{
	background-color:red;
}

app.js

class App extends React.Component{
	render(){
		return(
			<div className="red">
			<h1>Hello</h1>
			</div>
		)
	}
}
```

**As class is the Reserved word so we have to use the word `className.`**

**Inline CSS →**


![Inline CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko1lha0c823jntchms2c.png)

```jsx
class App extends React.Component{
	render(){
		const color = {color:'red'};
		return(
			<div style={color}>
			<h1>Hello</h1>
			</div>
		)
	}
}
```