How can I get an input's value on a button click in a Stateless React Component?

I found a solution for this exact scenario on React's official docs: https://reactjs.org/docs/refs-and-the-dom.html#refs-and-functional-components

This approach allows your component to remain stateless and also doesn't require you to update the parent component on every change.

Basically,

const input = props => {

let textInput = React.createRef();

function handleClick() {
  console.log(textInput.current.value);
}

return (
    <div>
      <input ref={textInput} placeholder="Type a message..." />
      <div onClick={handleClick} className="icon">
        <i className="fa fa-play" />
      </div>
    </div>
  )
}

Since you mentioned that you just started with React, I'd suggest that you work through the documentation (which offers nice explanation).

According to your comment, the usage of a functional component is not a requirement. Therefore I'd recommend to do it that way -->

Your CustomInput component:

import React from "react";
import PropTypes from "prop-types";

class CustomInput extends React.Component {
  constructor() {
    super();
    this.textInput = React.createRef();
  }

  static propTypes = {
    send: PropTypes.func
  };

  render() {
    const { send } = this.props;
    return (
      <React.Fragment> 
        <input placeholder="Type a message..." ref={this.textInput} />
        <div
          onClick={() => send(this.textInput.current.value)}
          className="icon"
        >
          CLICK ME
        </div>
      </React.Fragment>
    );
  }
}

export default CustomInput;

If you noticed, I've replaced the empty div with React.Fragment. In that case you can omit the unnecessary <div> wrappings (if those are not required) which will keep your DOM clean (Read more about it here.

Usage:

<CustomInput
   send={(prop) => {
      console.log(prop)
   }}
/>

I just used a dummy function which will log the input value to the console..

You can check the working example (Make sure to trigger the console in the editor) here

Tags:

Reactjs