react_spread_attributes

1_react_docs_spread.jsx

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = { firstName: 'Ben', lastName: 'Hector' };
  return <Greeting {...props} />;
}

2_primary_button.jsx

import { Button } from '@material-ui/core';

export const PrimayButton = (props) => (
  <Button color="primary" {...props} />
);

3_mui_button.jsx

export const Button = ({ color, variant, disableElevation, size, children }) => {
  // calculate style according to props and render 
};

4_primary_button_usage1.jsx

<PrimayButton>My Button</PrimayButton>

4_primary_button_usage2.jsx

<PrimayButton variant="contained" disableElevation size="large">My Button</PrimayButton>

5_primary_button_variants.jsx

import { Button } from '@material-ui/core';

export const PrimayButton = ({ size }) => (
  <Button color="primary" size={size} />
);

5_primary_button_variants_usage.html

<PrimayButton2 size="large">Large Button</PrimayButton>
<PrimayButton2 size="medium">Medium Button</PrimayButton>
<PrimayButton2 size="small">Small Button</PrimayButton>

6_spread_good_usage_hooks.jsx

const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return {
    value,
    onChange: handleChange
  };
};
// usage
const App = () => {
  const name = useFormInput('Mary');
  return (
    <div>
      <input {...name} />
      <button className="action-button">x</button>
    </div>
  );
};