umma.dev

Clean Javascript/ReactJS

Writing cleaner/easier-to-read code in ReactJS

Arrow Functions



function App(props) {
  return <>example</>
}

✅ const App = props => <>example</>

Automatic Return


const App = props => {
  return <div>example</div>
}

const App = props =>
  <div>example</div>

Destructure Props


const App = props => {
  <>
    {props.name}
    {props.age}
  </>
}

const App = ({name, age}) => {
  <>
    {name}
    {age}
  </>
}

Handle Undefined


const App = data => {
  <>
    {data && data.name}
  </>
}

const App = data => {
  <>
    {data?.name}
  </>
}

Destructure Arrays


const App = () => {
  <>
    {examples.map(example => {
      return <p>{example?.name}
    })}
  </>
}

const App = () => {
  <>
    {examples.map(({name}) => {
      return <p>{name}
    })}
  </>
}

Pass all Props


const App = props => {
  <div {...props}>{props?.name}</div>
}

const App = ({ name, ...rest }) => {
  <div {...rest}>{name}</div>
}

Default Values


let user = getUser();
if(!user) {
  user = "name";
}

const user = getUser() ?? "name";