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 }} />;
}

We can make it even more cleaner.

function Shorthand(props) {
  const someProps = {
    user = extractUser(props),
    fudge = calculateFudge(),
    bits = computeBits()
  };

  return <SomeComponent {...someProps} />;
}