How to re-use styles for components using the sx props with React and Material UI

A really simple way to create reusable components using sx for styling looks like this:

First of all, once you realize that you are creating a similar component more than twice, then it's a good time to create a component with some default properties and then you add some additional properties to make the differentiation, and a quick example would look like this:

import { Chip } from '@mui/material';

type ChipLabelGuidelineProps = {
  label: string;
  borderColor?: string;
  bgcolor?: string;
  padding?: string;
  //..rest of your attributes if you use them directly
}

const ChipLabelGuideline = (props: ChipLabelGuidelineProps) => {
  const { label, borderColor = 'white', ...restSxProps } = props;
  return (
    <Chip
      label={label}
      sx={{
        borderRadius: '8px',
        fontSize: '16px',
        fontWeight: '700',
        border: `2px solid ${borderColor}`,
        padding: '4px 25px',
        color: 'blue',
        ...restSxProps,
      }}
    />
  );
};

Then you can use it like this:

<ChipLabelGuideline label="Label 1" bgcolor='green' />
# Or
<ChipLabelGuideline label="Label 2" bgcolor='black' />
# or if you want to override some data
<ChipLabelGuideline label="Label 3" bgcolor='yellow' color='white' padding: '0 10px'/>

Really simple isn't it?

JavaScript null vs undefined

In JavaScript null and undefined are rather strange values, both serve a very similar purpose, which is to indicate the absence of a value.

Null

Null is used to assign a reference to an object that you will no longer need or, directly, you want to have the variable declared but initialize it with a value that you still do not know what it will be exactly. In all these cases the best thing to do is to assign a null value.

  var miVariable = null;
  console.log(miVariable);

//log null

undefined

For undefined means that the variable is declared but its value has not yet been defined.

  var miVariable
  console.log(miVariable);

//log null

Both values are values of type false, so if you do a non-strict comparison you will get true undefined, which means that the variable is declared but its value has not yet been defined.

if (null == undefined) {
  return true
 }
//log true

and if you do a strict comparison, because they are not really the same, it returns a false:

if (null === undefined) {
   return true
 }
return false
//log false

Set and preserve cookies on and Axios API call

I was using Axios to test an API created in Rails, trying to set up cookies for a User Authentication process. After attempting to get the information back i realize that the cookie was not persistent, due to the lack of one parameter... withCredentials: true So if you want your session to store cookies in the client side and have them available remember to pass it to the call import axios from import axios from 'axios' axios.post(API_SERVER + '/login', { email, password }, { withCredentials: true }) Otherwise the cookie would not be saved.