Whats the proper way to have a form submit data in a stateless react component?

Question

I have a stateless react component that is a little pop up. It takes some data from the user, and passes that back to its parent, where it executes the work.

What is the best way for this component to have a handleSubmit() function, that takes the user input, and sends it back to the parent?

import React, { Component } from "react";
import "../../../node_modules/bulma/css/bulma.css";

const Transfer = (props, token, web3) => {
  return (
    <div className="modal is-active">
      <div className="modal-background" onClick={props.onClick} />
      <div className="modal-card">
        <section className="modal-card-body">
          <div className="content">
            <h1 className="title"> Transfer Tokens </h1>
            <p className="has-text-danger">
              Requires that you are the owner of the token you are transferring
            </p>
            <p className="subtitle">How it works</p>
            <p className="">
              Enter the ID of the token you want to transfer, the address to
              whom its going to, and thats it!
            </p>
            //problem area
            <form onSubmit={props.onClickSubmit}>
              <label htmlFor="text">Address to recieve token</label>
              <input
                name="Address"
                className="input is-info "
                required="true"
              />
              <label htmlFor="number">Token ID</label>
              <input
                className="input is-info"
                name="Token ID"
                type="number"
                required="true"
              />
              <a className="button is-pulled-right">Submit</a>
            </form>
          </div>
        </section>
        <footer className="modal-card-foot is-clearfix">
          <a className="button" onClick={props.onClick}>
            Cancel
          </a>
        </footer>
      </div>
    </div>
  );
};

export default Transfer;

I pass in as a prop, onClickSubmit, in my parent component, and that contains the logic for what I'm trying to do.

Very new to stateless react components

Answer 1

It will be difficult to accomplish what you want with a stateless component since you cannot use either refs or state in a stateless component. You can think of a stateless component as a pure function that returns a piece of UI depending on the props you give it.

You could instead use a stateful component and eg store the input values in state and call the onClickSubmit prop function with this state when the user submits the form.

Answer 2

If you want to build stateless forms component, I send you a lib that I'm working on:

react-distributed-forms

This allow you to build your Transfer Component this way, (pay attention to use Input instead of input and Button instead of button):

 import React, { Component } from "react"; import "../../../node_modules/bulma/css/bulma.css"; import { Input, Button } from "react-distributed-forms"; const Transfer = (props, token, web3) => { return ( <div className="modal is-active"> <div className="myForm"> <label htmlFor="text">Address to receive token</label> <Input name="Address" className="input is-info " required="true" /> <label htmlFor="number">Token ID</label> <Input className="input is-info" name="Token ID" type="number" required="true" /> <Button name="submit" className="button is-pulled-right"> Cancel </Button> </div> </div> ); }; export default Transfer; 

And then in your parent Component, wherever it is in the hierarchy, you simply do:

 <Form onSubmit={({ name }) => { console.log(name); }} onFieldChange={({ name, value} ) => { console.log(name, value); }}> ...whatever <Transfer /> ...whatever </Form> 

onFieldChange will receive every input change. onSubmit will receive the attribute "name" on the Button when you click it.

react-distributed-forms use React context API, so you don't have to pass directly props, it just works. Is built for really dynamic forms...