jsx-object-literal.jsx

function WhySoManyProps(props) {
  const user = extractUser(props);
  const fudge = calculateFudge();
  const bits = computeBits();
  
  // This is soooooo redundant.
  return <SomeComponent user={user} fudge={fudge} bits={bits} />;
}

function Shorthand(props) {
  const user = extractUser(props);
  const fudge = calculateFudge();
  const bits = computeBits();
  
  // spread all the new props which have the exact same name as the props
  // for the child component using ES6 syntax.
  return <SomeComponent {...{ user, fudge, bits }} />;
}