sparker888

Stop Using “&&” for Conditional Rendering in React

Using && is a standard way to conditionally render parts of a component depending on props and state. For example,

function MyComponent({ condition }) {
	return (
		<div>
			<h1>Title</h1>
 {condition &amp;&amp; }

sparker888

React.createElement syntax

Basic element object

const element = React.createElement("h1");
//returns an object similar to this one:
{
  type: 'h1',
 props: {}

sparker888

Object Destructuring

The object and array literal expressions provide an easy way to create ad hoc packages of data.

const x = [1, 2, 3, 4, 5];

The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.

const x = [1, 2, 3, 4, 5];

sparker888

Array Methods

filter

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function (true or false).

const filteredItem = items.filter((item) => item.age < 40)

const result = words.filter((word) =&gt; word.length &lt; 6)