reading-notes

React 2

• conditional example: ``` function UserGreeting(props) { return <h1>Welcome back!</h1>; }

function GuestGreeting(props) { return <h1>Please sign up.</h1>; }

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; }

- true && expression always evaluates to expression, and false && expression always evaluates to false.
- Example of using if else inline conditional:

render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is {isLoggedIn ? ‘currently’ : ‘not’} logged in. </div> );

  - Example of using map in JS:

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); This code logs [2, 4, 6, 8, 10] to the console.

- example of using map in react:

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

{number}

);

ReactDOM.render(

{listItems}

, document.getElementById(‘root’) );

- A good rule of thumb is that elements inside the map() call need keys.
- Example handling multiple form inputs:

class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 };

this.handleInputChange = this.handleInputChange.bind(this);   }

handleInputChange(event) { const target = event.target; const value = target.type === ‘checkbox’ ? target.checked : target.value; const name = target.name;

this.setState({
  [name]: value
});   }

render() { return ( <form> Is going: <input name=”isGoing” type=”checkbox” checked={this.state.isGoing} onChange={this.handleInputChange} />
Number of guests: <input name=”numberOfGuests” type=”number” value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </form> ); } }

- In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. 
- There should be a single “source of truth” for any data that changes in a React application.
- Instead of trying to sync the state between different components, you should rely on the top-down data flow.
- Example of a more “specific” component rendering a more “generic” one and configures it with props:

function Dialog(props) { return ( <h1 className="Dialog-title"> {props.title} </h1> <p className="Dialog-message"> {props.message} </p> ); }

function WelcomeDialog() { return (

); } ```

• Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way.
• props are a way of passing data from parent to child.
• Deciding if something is state or not:
  • Is it passed in from a parent via props? If so, it probably isn’t state.
  • Does it remain unchanged over time? If so, it probably isn’t state.
  • Can you compute it based on any other state or props in your component? If so, it isn’t state.