reading notes for code fellows
A continuation of important knowledge for jumping back into JavaScript and React
When you have distinct components in React, you can render only some of them depending on the state of your application. You can also use things like logical and or if statements inline by wrapping them in curly bracers, which can help you to conditionally include elements. You can also use ternaries to conditionally render things. If you don’t want something to render, you can set it to return null.
You can use the .map() function to do things with arrays, and they can be included the same as any regular variables with curly bracers. When you’re mapping to list item elements, it will want a unique key for each, which you can provide while mapping through it pretty easily with something like an id or a string version of the number or even the index, but that should only be done if you don’t have a stable id and you know the order of items won’t change.
Forms naturally keep internal state, but if you don’t want their default behavior to occur, you will need to use controlled components, which can be something like an input form whose value is controlled by React. You can use things like onChange to update state whenever the user hits a key. You can also use uncontrolled components if this is too much to work on.
When several components need to reflect the same shared state, it can be lifted up to the most common ancestor. If the common ancestor is the source of truth for each component, they will have the same values.
React has a powerful composition model, and it is suggested to use it over inheritance to reuse code between components. For some components, you can use the children prop to pass children elements directly into the output, which allows other components to pass arbitratry children to them. Composition allows you to have a generic version of a component and then configure a more specific version of it with props.