my-awesome-component.jsx

import render from './my-awesome-component.render'

class MyAwesomeComponent extends Component {
  constructor() {
    super()
    this.state = {
      data: ['First item', 'Second Item']
    }
    this.render = render.bind(this)
  }
  
  onAddItem(item) {
    this.setState(state => ({
      data: [...state.data, item]
    }))
  }
  
}

my-awesome-component.render.jsx

export default const render = () => (
  <div>
    <ul>
      {this.state.data.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
    <div>
      <input ref={input => this.input = input} placeholder="Add new word..." />
      <button onClick={() => this.onAddItem(this.input.value)}>Add</button>
      </div>
  </div>
)