Home

React Concept

A collection of React concepts from basic to advanced, inspired by the 30 Days of React Project.

Directory

Components

• Variable Component

  const Component = <></>;

• Functional Component

  function Component() {
    return <></>;
  }

• Arrow Function Component

  const Component = () => {
    return <></>;
  }

• Class Component

  class Component extends React.Component {
    render() {
      return <></>;
    }
  }

Mapping

• Flat Array Mapping

  <>{array.map(item => <div key={item}>{item}</div>}</>

• Nested Array Mapping

  <>
    {array.map(item => (
      <div key={item}>
        {item.map(subitem => (
          <div key={subitem}>{subitem}</div>
        ))}
      </div>
    ))}
  </>

• Object Array Mapping

  <>
    {array.map(({ key1, key2 }) => (
      <div key={key1}>
        <div>{key1}</div>
        <div>{key2}</div>
      </div>
    ))}
  </>

• Object Mapping

  <>
    {Object.entries(objectOfMembers).map(([key, { value1, value2 }]) => (
      <div key={key}>
        <div>{key}</div>
        <div>{value1}</div>
        <div>{value2}</div>
      </div>
    ))}
  </>

Hooks

useState

• Use State

  const [state, setState] = React.useState(initialValue);

• Conditional Rendering

  <>{condition ? <></> : <></>}</>
  {/* or */}
  <>{condition && <></>}</>

More coming soon.