read-038.md

Read 38: REACT 2

Conditional Rendering

• In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

Element Variables

• You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change.

---

Lists and Keys

Rendering Multiple Components

• You can build collections of elements and include them in JSX using curly braces {}.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

---

FORMS

Controlled Components

• In HTML, form elements such as , <textarea>, and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”. Lifting State Up Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Composition vs Inheritance Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. Thinking in React There are two types of “model” data in React: props and state. It’s important to understand the distinction between the two. Think about building components and applications with React. While it may be a little more typing than you’re used to, remember that code is read far more than it’s written, and it’s less difficult to read this modular, explicit code. As you start to build large libraries of components, you’ll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink.