Get Input Value From Stateless Component

Question

CONTEXT

I'm trying to get the value of an input field from a stateless component inside another stateless component and then use it to call a method. I'm using rebass for my UI component and doing this in Meteor + Mantra.

I understand that I could do this by using refs if I were using <input> HTML fields and not another stateless component.

PROBLEM

My current code yield preventDefault of undefined, and when removed, the console.log prints out each time the input changes, not on submit. I believe that my state applies to the entire Dashboard component, instead of the stateless Rebass <Input/>, but I do not know how to change this.

import React from 'react';
import {PageHeader, Container, Input,Button} from 'rebass';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);

    this.state = { websiteUrl: ''};
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(event) {
    this.setState({websiteUrl:event.target.value});    
  }

  onFormSubmit() {
    event.preventDefault;
    const {create} = this.props;
    const {websiteUrl} = this.state.websiteUrl;
    console.log(this.state.websiteUrl);
    create(websiteUrl);
  }    

  render() {
    const { error } = this.props;

    return (
      <div>

      <PageHeader
        description="Dashboard Page"
        heading="Dashboard"
      />

      <Container>
      <form>
            <Input
              value={this.state.websiteUrl}
              type="text"
              buttonLabel="Add Website"
              label="Website"
              name="add_website"
              onChange={this.onInputChange}    
            />

            <Button
              backgroundColor="primary"
              color="white"
              inverted={true}
              rounded={true}
              onClick={this.onFormSubmit()}
            > Add Website </Button>    
        </form>    
      </Container>
      </div>
    );
  }    
}

export default Dashboard;

Answer 1

You should pass an event to the onFormSubmit function:

    <Button
      backgroundColor="primary"
      color="white"
      inverted={true}
      rounded={true}
      onClick={(event) => this.onFormSubmit(event)}
      ...