gistfile1.js

let Thing = (props) => (
  <div>look {props.name}! no state!</div>
)

render(<Thing name="Ma"/>, el)

Even sexier:

function Thing ({name}) {
  return (
    <div>look {name}! no state!</div>
  )
}

or

const Thing = props => <div> look {props.name}! no state! </div>

Maybe

const Thing = ({name}) => <div> look {name}! no state! </div>

Should we handle props in events likewise?

function handleClick(name, e) {
  console.log(`The name is "${name}".`);
}

function Thing ({name}) {
  return (
    <div onClick={handleClick.bind(null, name)}>look {name}! no state!</div>
  )
}

@Yomguithereal It might look nicer to push handleClick within Thing scope.

Maybe you guys like https://github.com/stoeffel/react-mini. It has a similar approach.

@bebraw it would indeed be cleaner.

Just to let you know. The new react-mini api is almost the same as you suggested here.
https://github.com/stoeffel/react-mini#api

import pure from 'react-mini/pure';

const Thing = pure(({name}) => {
  function handleClick(e) {
    console.log(`The name is "${name}".`);
  }
  return (
    <div onClick={handleClick}>look {name}! no state!</div>
  )
});

example @jsbin