Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 2, 2022 06:41 pm GMT

Props and More | Day 3

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,

**Suppose we have a Hello Component which takes the name as the argumentso 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 dont 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

**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

**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,

**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

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 cant change them.

Like,

**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.

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

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

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

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

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

style.css.red{    background-color:red;}app.jsclass 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

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

Original Link: https://dev.to/developerioweb/props-and-more-day-3-4897

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To