How to call method on a JSX element when writing functional react

Question

I have recently started using React and Redux. One thing that often messes with my brain is how to re-write all the code examples from documentations that are usually written object based to my functional code base.

I am now in one of those situations; I can not find a way to call a method belonging to react-custom-scrollbars ( link to docs ) which I am using in one of my components. Below is a simplified version of the component. I have commented out the section where I would like to call the method scrollToBottom() .

Bonus question: If I skip using the onUpdate() event, how would I go proceed if I want to call scrollToBottom() when a message is appended to the messages array?

const Chat = ({messages, app, keyDown, pressSend, setMessage, toggleEnter}) => {

  return (
    <div id="orbit-chat-content">
      <Scrollbars
        onUpdate={() => {
          //
          // HERE I WANT TO SCROLL TO BOTTOM
          //
          // this.scrollToBottom()
          //
        }}
        className="react-scrollbar">
        <div id="orbit-chat-conversation">
          { messages.map(message => <Message {...message} />) }
        </div>
      </Scrollbars>
    </div>
  );
};

export default Chat;

Thank you very much for taking your time to look at this!

Answer 1

The answer to your question:

Stateless components don't have refs . Which you would normally use to access the scrollbars instance.

Your real problem:

...how to re-write all the code examples from documentations that are usually written object based to my functional code base.

You don't have to. Statefull components are not deprecated or so. They are the base. PureRender Components / Functional components, are just an addition to the stack to provide a way of writing small independent components, like a Button .

Of course you can write a whole app only with stateless components, but if you need internal state, access to instances, some internal logic, you can and should use Normal Components too.