Skip to main content

Props(PropsTypes and Default Props) and Conditional Rendering

Main App.jsx code(parent Component)

Example:-

import Header from './Header.jsx'

import Footer from './Footer.jsx'

import Food from './Food.jsx'


function App() {

  return(

    <>

    <Header></Header>

    <Footer></Footer>

    <Food></Food>

    </>

  );

}


export default App




Child Components(Header.jsx)



function Header(){

    return(

        <header>

            <h1>My Website</h1>

            <nav>                

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Services</a></li>                

                    <li><a href="#">About us</a></li>

                    <li><a href="#">Contact us</a></li>

                </ul>

            </nav>

            <hr></hr>

        </header>

    );

}


export default Header

Another Child Component (Footer.js)

function Footer(){

    return(

        <footer>

            <p>&copy; {new Date().getFullYear()} Your Website</p>

        </footer>

    )

}


export default Footer



Another Component( Food.jsx)

function Food(){

    const food1="Orange";

    const food2="Apricot";

    return(

        <ul>

            <li>{food1}</li>

            <li>{food2}</li>


        </ul>

    );


}


export default Food


Summary: Components are small sections of code that includes html and Javascript, and functions will return the code and make it reusable. 


—-------------------------------------

Card Components


Some changes in the App.jsx

import Card from './Card.jsx'



function App() {

  return(

    <>

    <Card></Card>

    <Card></Card>

    </>

  );

 

}


export default App



And then a card Component




function Card(){

   return(

    <div className="card">

        <img className="card-image" src=""></img>

        <h2 className="card-title">Saurav Singh</h2>

        <p className="card-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>


    </div>

   );

}


export default Card


Adding external css

.card{

  border: 4px solid rgb(82, 82, 111);

  border-radius: 10px;

  box-shadow: 5px 5px 5px;

  padding: 20px;

  margin: 10px;

  text-align: center;

  max-width: 250px;

  display: inline-block;

}


.card .card-image{

  max-width: 60%;

  height: auto;

  border-radius: 50%;

  margin-bottom: 10px;

}

.card .card-title{

  font-size: Arial;

  margin: 0;

  color: aquamarine;


}

.card .card-para{

  font-size: Arial;

  margin: 0;

  color: blue;

}



Button Card For Example:-

Button.jsx

function Button(){

    return(<button className="button">Click me</button>);

}


export default Button


Adding external css(index.css)

.button{

  background-color: hsl(200, 100%, 50%);

  color: white;

  padding: 10px 20px;

  border-radius: 5px;

  border: none;

  cursor: pointer;

}



Props:-  Read only properties that are shared between components.

A parent component can send data to child component

<component key=value />


At Index.js

import Students from './Students.jsx'


function App(){

  return(

    <>

    <Students name="Saurav Singh" age={17} isStudent={true}></Students>

    <Students name="Saurav Mehra" age={18} isStudent={false}></Students>

    <Students name="Saurav Pangia" age={20} isStudent={true}></Students>

    <Students />

    </>

  );


}


export default App


Student.jsx


import PropTypes from 'prop-types'

function Students(props){

    return(

        <div className="student">

            <p>Name: {props.name}</p>

            <p>Age: {props.age}</p>

            <p>Student: {props.isStudent ? "yes": "no"}</p>

        </div>

    );

}


Students.propTypes= {

    name: PropTypes.string,

    age: PropTypes.number,

    isstudent: PropTypes.bool,


}


Students.defaultProps ={

    name: "Guest",

    age: 0,

    isStudent: false,

}

export default Students



To accept props we need props parameter


PropTypes means a mechanism that ensures that passed value is of the correct data type example age: PropTpes.number

Default Props:- Default values for props in case they are not passed from the parent component to child component

name:”Guest”


—--------------------


Conditional Rendering: It allows us to control what gets rendered in our application based on certain condition(show, hide or change components)


App.jsx


import UserGreeting from './UserGreeting.jsx'


function App(){

  return(

    <>

    <UserGreeting isLoggedIn={true} username= "saurav" />

    </>


  );

}


export default App



UserGreeting.jsx

import PropTypes from 'prop-types';



function UserGreeting(props){

    const welcomeMessage= <h2 className="welcome">Welcome {props.username} </h2>

    const loginPrompt= <h2 className="welcome">Please Log in to Continue</h2>

   

        return(props.isLoggedIn ? welcomeMessage : loginPrompt);

        }



       


UserGreeting.proptype={

    isLoggedIn: PropTypes.bool,

    username: PropTypes.string,

}


UserGreeting.defautProps={

    isLoggedIn: false,

    username: "guest",

}




export default UserGreeting




Comments

Post a Comment

Popular posts from this blog

what are the benefits of Profile Creation in SEO?

Harness the power of profile creation to supercharge your SEO strategy! In today's digital world, visibility is vital to success; make sure you stand out and capture the attention of search engines and customers alike. Profile creation allows you to benefit from a multitude of advantages with regard to your website's ranking and overall visibility. Whether you're an experienced business owner or new on the entrepreneurial path, understanding the importance of profile creation for SEO is necessary if you want to stay ahead in this competitive game. Let’s explore how its potential can take your website to greater heights! The creation of profiles is an excellent way to increase traffic and position on the Search Engine Results Page. It is not extremely hard to build a profile, but you must enter the right information. Having your image name as your username makes your site appear more open and trustworthy. Profiles are a decent source of improvement over the immediate site in...
Post a Comment
Read more

The Power of Profile Creation on Social Media

Create profiles on various social networking platforms, directories, forums, and other platforms in order to expand your online visibility and presence. An SEO profile provides multiple advantages, from increasing your presence online and making new contacts to opening accounts on various social media sites to create more awareness for yourself or your business, increasing website traffic or growing followership across platforms. Reaching a wider market can be accomplished by advertising your goods and services on various websites through profiles. Doing this will establish you as an industry expert online, increasing visibility on search engine results pages (SERPs), and website rankings by creating profiles on high-quality sites, and increasing brand recognition online. Backlinks are an essential element of SEO and, when created on high-quality sites, can substantially increase the credibility and trustworthiness of your site. By creating profiles across various platforms and sites, ...
Post a Comment
Read more

Lord Rama Paintings: How They Convey Stories, Emotions, and Culture

  As you stroll down the streets of India, you'll probably come across magnificent paintings portraying modern art lord ram painting that glisten in the sunlight. These exquisite artworks have mesmerized people for generations due to their ability to narrate stories, convey sentiments, and represent culture. Every painting is an enchanting masterpiece with intricate details and vibrant colors that will leave you spellbound. Come along as we examine how these paintings encapsulate Hindu mythology and display a marvel of artistry that must not be overlooked! Introduction to Lord Rama Paintings In the forests of India, Lord Rama spent most of his time during his exile from his kingdom. During this time, he met Hanuman, the monkey god, and fought Ravana, the demon king. It is one of the most popular Hindu epics and is often depicted on scrolls and walls. Many lord rama paintings depict with blue skin, which symbolizes his divinity. He usually holds a bow and arrow as well as a sword....
Post a Comment
Read more