read401-38.md

React 2

Conditional Rendering

There is to main way to render:

1.  function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
        }       
   

2.  <div>
        <h1>Hello!</h1>
        {unreadMessages.length > 0 &&
            <h2>
            You have {unreadMessages.length} unread messages.
            </h2>
        }
        </div>
   

Lists and Keys

1. Iterat over list:

list.map(ele=>{
    console,log(ele)
})

2. Key with map:

cookies.map((ele,idx)=>{
    return(<p key={idx}>{ele}</p>)
})

Forms

if we have this form and we need to get data from it:

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

we will create function to handle the form submission:

const [cookies,setCookes]= useState() 
function  handleSubmit(e){
    e.preventDefualt()
    setCookies={
        name:e.target.name.value
    }
}

Composition vs Inheritance

Composition and inheritance are the approaches to use multiple components together in React. ... React recommend using composition instead of inheritance as much as possible and inheritance should be used in very specific cases only.

React recommends use of Composition over Inheritance, here is why. Everything in React is a component, and it follows a strong component based model. This is one of the primary reasons that composition is a better approach than inheritance for code reuse.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}