Imperative-> how to do something, Declarative-> what to do.
Passing Property Down:Parent->Child & Up:Child->Parent
//Inside Parent Comp, define Child Prop inside Child tag:
<MyChildComp pptyToPassDown = {JsDataObject}/> //Down
<MyChildComp pptyToPassUp = {handlerFunctionRef}/> //Up
//Inside Child Comp
(props) => return (<div>{props.pptyToPassDown})</div>); //Down
(props) => return (<div> onEvent = {props.pptyToPassUp("messageToParent")}</div>); //Up
Event Handler inside Component – Add appropriate prop onClick
#Call EditRow() on Click
<button className={classes.buttonEdit}
onClick={EditRow}>Text</button>
#Call anonymus func() on Click
<button className={classes.buttonEdit}
onClick={() => {}}>Text</button>
Func-Ref versus Func-Call
onClick={myFunc} # myFunc Ref, not executed on Comp Init
onClick={myFunc()} # myFunc() call, gets executed on Comp init
useState() – React Hook to manage Component State
# State change forces Component Re-Render
# always returns 2 elements
# myVar - represents Component State
# myFuncRef - funtion to change State - update myVar
const [ myVar, myFuncRef ] = useState();
Import Styles as Object locally
# Import styling from file
import styleSheet from './AddTargetForm.module.css';
# Assigning Styles
<div className={styleSheet.control}>
Render List of Elements
# Render list of Elements as Array
return <div> {["text1", "text2", "text3"]} </div>;
# or using Map method render elements from myDataArray
return <div> { myDataArray.map((arrayElem) => {return <li>arrayElem</li>})} </div>;
Import – Default versus Specific
# 1.Default Import (import x from './module.js')
# This syntax imports the default export from the module.
# A module can only have one default export.
# You can use any name for the imported default (e.g., import myModule from './module.js').
# 2. Named Import (import {x} from './module.js')
# This syntax imports specific named exports from the module.
# A module can have multiple named exports.
# The names must match the ones defined in the module's export statement.

