Skip to content

Instantly share code, notes, and snippets.

@dbuentello
Forked from benhughes/react-statless-funcs.md
Created September 24, 2015 20:44
Show Gist options
  • Save dbuentello/9871a9289e1c004a6345 to your computer and use it in GitHub Desktop.
Save dbuentello/9871a9289e1c004a6345 to your computer and use it in GitHub Desktop.

#A brief intro into Stateless functions#

So stateless functions are new in React 0.14 which are quite interesting. They look a bit like this.

const Test = ({name, amount}) => {
 return <div className="test">{name} has £{amount}</div>;
};

ReactDOM.render(<Test name="ben" amount="-2000" />) //  <div className="test">ben has £-200</div> 

They make simple components even simpler meaning the lazy no longer have to write prop types and render functions etc.. Hooray!

I'm sure many people will start using them for very simple components like buttons etc. but you can also do a a few crazier things like this:

class List extends Component {
  static contextTypes = {
    UserStore: PropTypes.object.isRequired
  };

  static subComponents = {
    list: ({items}) => <ul>{items.map(item => <Balance.subComponents.listItem item={item}/>)}</ul>,
    listItem: ({item}) => <li key={item}>{item}</li>
  };

  render() {
    const {myList} = this.props;
    
    return (
      <div className="some-holder">
        <Balance.subComponents.list items={myList} />        
      </div>
    );
  }
}

That's right! Inlining parts of your component instead of creating functions. Not entirely convinced it looks cleaner though (or if it's even useful), but I'm looking forward to playing around with them as the next project ramps up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment