reactjs - When and where to separate a React component into a separate file? When to do it in the same file? -

now let's have output select field in form. have set select options based on data passed component.

when using es6 classes, can use method in same file display :

selectform() {   <input ....>   this.props.data.map((data) => {     option...   }) }  render() {   return (     <div>        {this.selectform()}     </div>   ) } 

we can add separate file, import separate component , use in file :

render() {   return (     <div>        <selectfield data={this.props.data}>     </div>   ) } 

out of 2 options, recommended way of doing things?

if want reuse component (in select case surely would) write in separate file , import it. if it's app specific component in app component (method 1 in example). read more reusable components here: https://facebook.github.io/react/docs/reusable-components.html