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