React Adding styles function

   const btnClasses=`${classes.button} ${classes.bump}`;//adding styles

  return (

    <Fragment>

      <button className={btnClasses} onClick={props.onClick}>

     //initially <button className={classes.button} onClick={props.onClick}>

React Context: use context instead of passing data with usestate to nested components

Readme

1. create Cart-Context.js with default structure (ie, **{items:[],totalAmount:0,addItem:(item)=>{},removeItem:(id)=>{}}**)

2. create CartProvider.js with above Cart-Context default obj structure,using it with dynamic values 

{ items:[],totalAmount:0, addItem:addItemToCartHandler,removeItem:removeItemFromCartHandler },

ii.Create reducer and dispatch data from functions with addItemToCartHandler, removeItemFromCartHandler

iii.create usestate and add reducer to usestate

iv.<CartContext.Provider value={cartContext}> {props.children} </CartContext.Provider>

3.In app.js <CartProvider>  <Header onShowCart={showCartHandler}/>... </CartProvider>

4.In header.js <header className={classes.header}><HeaderCartButton onClick={props.onShowCart}></HeaderCartButton></header>

5.HeaderCartButton.js :

const HeaderCartButton = (props) => {

    const cartCtx= useContext(CartContext);

    const numberOfCartItems= cartCtx.items.reduce((curNumber, item)=>{

        return curNumber+item.amount;

    },0);

  return (

    <Fragment>

      <button className={classes.button} onClick={props.onClick}>

        {/* 3. for popopening */}

        <span className={classes.icon}>

          <CartIcon/>

        </span>

        <span>Cart</span>

        <span className={classes.badge}>{numberOfCartItems}</span>

      </button>

    </Fragment>

  );

};

_________________________________________________________

Cart-Context.js

import React from "react";

const CartContext=React.createContext({

    items:[],

    totalAmount:0,

    addItem:(item)=>{},

    removeItem:(id)=>{}

});

export default CartContext

2.CartProvider.js

import { useReducer } from "react";

import CartContext  from "./cart-context";

const defaultCartState={

    items:[],

    totalAmount:0

};

const cartReducer=(state,action)=>{

    if(action.type="ADD"){

    const updatedItems= state.items.concat(action.item);

    const updatedTotalAmount=state.totalAmount+action.item.price*action.item.amount;

    return {

        items:updatedItems,

        totalAmount:updatedTotalAmount

    };

    }else if(action.type="REMOVE"){

    }

   return defaultCartState;

}

const CartProvider= props=>{

   const [cartstate, dispatchCartAction]= useReducer(cartReducer,defaultCartState);

    const addItemToCartHandler=(item)=>{

        dispatchCartAction({type:'ADD',item:item});

    }

    const removeItemFromCartHandler=(id)=>{

    dispatchCartAction({type:"REMOVE",id:id})

    }

    const cartContext={ // first add these below lines next write reducer code.

        // items:[],totalAmount:0, initially like this b4 adding reducer

        items:cartstate.items,

        totalAmount:cartstate.totalAmount,

        addItem:addItemToCartHandler,

        removeItem:removeItemFromCartHandler

    };

    return <CartContext.Provider value={cartContext}>

       {props.children}

    </CartContext.Provider>

}

export default CartProvider;

3.App.js

 return (

    <CartProvider>

      {cartIsShown && <Cart onClose={hideCartHandler}/>}

      <Header onShowCart={showCartHandler}/>

       {/* 1. for popopening */}

      <main>

        <Meals />

      </main>

    </CartProvider>

  );

}

export default App;
4.Header.js 

import React, { Fragment } from "react";

import HeaderCartButton from "./HeaderCartButton";

import classes from './Header.module.css';

import mealsImage from '../../assets/meals.jpg'

const Header = (props)=>{

    return <Fragment>

        <header className={classes.header}>

        <h1>ReactMeals</h1>

        <HeaderCartButton onClick={props.onShowCart}></HeaderCartButton>

         {/* 2. for popopening */}

        </header>

        <div className={classes['main-image']}><img src={mealsImage}></img></div>

    </Fragment>

}

export default Header;

HeaderCartButton.js

import CartContext from "../../store/cart-context";

const HeaderCartButton = (props) => {

    const cartCtx= useContext(CartContext);

    const numberOfCartItems= cartCtx.items.reduce((curNumber, item)=>{

        return curNumber+item.amount;

    },0);

  return (

    <Fragment>

      <button className={classes.button} onClick={props.onClick}>

        {/* 3. for popopening */}

        <span className={classes.icon}>

          <CartIcon/>

        </span>

        <span>Cart</span>

        <span className={classes.badge}>{numberOfCartItems}</span>

      </button>

    </Fragment>

  );

};

export default HeaderCartButton;

React: passing data from multiple child to parent -

     In 1.app.js 1 <Header onShowCart={showCartHandler}/> Go to 2.Header Component 2 <HeaderCartButton onClick={props.onShowCart}></HeaderCartButton> Go to 3.HeaderCardButton Component 3 <button className={classes.button} onClick={props.onClick}>

App.js

Header.js

HeaderCartButton.js

React Input.js COmponent --CART proj

 input.js

import React, { Fragment } from "react";

import classes from './Input.module.css';

const Input=(props)=>{

    return         <div    className={classes.input}>

        <label htmlFor={props.input.id}>{props.label}</label>

        <input {...props.input} />

        </div>

}

export default Input

 {/* {label props.input.id} added as {...props.input}for inp,wit  spread oper auto added type=txt  */}

       

input.module.css

.input {

    display: flex;

    align-items: center;

    margin-bottom: 0.5rem;

  }

 

  .input label {

    font-weight: bold;

    margin-right: 1rem;

  }

 

  .input input {

    width: 3rem;

    border-radius: 5px;

    border: 1px solid #ccc;

    font: inherit;

    padding-left: 0.5rem;

  }

MealItemForm:

 <Input

          label="Amount"

          input={{

            id: "amount_"+props.id,

            type: "number",

            min: "1",

            max: "5",

            step: "1",

            defaultValue: "1",

          }}

        />

        {/* with one {} evaluate js exp, with 2 {{}} sets as obj */}

React: passing data/keys to childs

1.Available Meals:(Result data)

const AvailableMeals = () => {

  const mealsList = DUMMY_MEALS.map((meal) => <MealItem key={meal.id} name={meal.name} description={meal.description} price={meal.price}/>);

2.MealItem: (Row Data)

 <div> <MealItemForm id={props.id}></MealItemForm></div>

3.MealItemForm

const MealItemForm = (props) => {

  return (

    <Fragment>

      <form className={classes.form}>

        <Input

          label="Amount"

          input={{

            id: "amount_"+props.id,

            type: "number",

            min: "1",

            max: "5",

            step: "1",

            defaultValue: "1",

          }}

        />

        {/* with one {} evaluate js exp, with 2 {{}} sets as obj */}

        <button>+ Add</button>

      </form>

    </Fragment>

  );

};

 

React: Card.js

 Card.js

import classes from './Card.module.css';

const Card = props => {

  return <div className={classes.card}>{props.children}</div>

};

export default Card; Card.css

.card {

    padding: 1rem;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    border-radius: 14px;

    background-color: white;

  }

React: Filling user input box misses highlights that input on submit. (order top to bottom)

 129 lec

diving into forward refs