'Export React Form Values to Another JS File

I have a form set up with React Class Components. I want to take the values input by the user and send them to another file. These values will be parameters of an external function call. The values I can console these values declared as constants in the handleSubmit() function but do not know how to export them

import React, {Component} from 'react';
import "./styles.css";


class TokenForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      daoName: '',
      tokenName: '',
      tokenSymbol: '',
      daoCap: '',
      minEth: '',
      maxEth: '',
      mintRate: '1000'
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }


  handleSubmit(event) {
    event.preventDefault();
    
    const dName = event.target.daoName.value;
    const tName = event.target.tokenName.value;
    const tSymbol = event.target.tokenSymbol.value;
    const dCap = event.target.daoCap.value;
    const mnEth = event.target.minEth.value;
    const mxEth = event.target.maxEth.value;
    const mRate = event.target.mintRate.value;
    console.log(dName, tName, tSymbol, dCap, mnEth, mxEth, mRate)
    
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
      <h1>Mint DAO Token</h1>
      <p>Customise your token variables below</p>
      <input type="text" placeholder="DAO Name" name="daoName" value={this.state.daoName} onChange={this.handleInputChange}/>
      <input type="text" placeholder="Token Name" name="tokenName" value={this.state.tokenName} onChange={this.handleInputChange}/>
      <input type="text" placeholder="Symbol e.g. ABC" name="tokenSymbol" value={this.state.tokenSymbol} onChange={this.handleInputChange}/>
      <input type="number" placeholder="DAO Max Capacity" name="daoCap" value={this.state.daoCap} onChange={this.handleInputChange}/>
      <input type="number" placeholder="Minimum Investment Limit (ETH)" name="minEth" value={this.state.minEth} onChange={this.handleInputChange}/>
      <input type="number" placeholder="Maximum Investment Limit (ETH)" name="maxEth" value={this.state.maxEth} onChange={this.handleInputChange}/>
      <select name="mintRate" value={this.state.mintRate} onChange={this.handleInputChange}>
        <option value="1000">1,000</option>
        <option value="10000">10,000</option>
        <option value="100000">100,000</option>
      </select>
      <button type="submit">SUBMIT</button>
      </form>
    );
  }
}

export default TokenForm;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source