Unable to use onClick event ReactJS

Question

I am trying to send data in a form using onClick. Below is my Form

import React from 'react';
const form = props => (
    <form>
      <input type = "text" name = "name" placeholder="name" />
      <input type = "text" name = "lastname" placeholder="last name" />
      <input type = "text" name = "id" placeholder="email address" />
      <button onClick = {props.clickHandler}>Send</button>
    </form>

);
export default form;

Below is my App.js

import React, { Component } from 'react';
import './App.css';
import Form from './Components/Form';

class App extends Component {
  clickHandler = async(e) =>{
    e.preventDefault();
    const name = e.target.value;
    console.log(name + 'was typed');
  }

  render() {
    return (
      <div className="App">
        <h1>I am a React App </h1>
        <Form form = {this.Form}/>
      </div>
    );
  }
}

export default App;

I am not sure why the value is not being visible on console. Any help is appreciated.

Answer 1

import React, { PureComponent } from 'react';

export class Form extends PureComponent {

    state = {
        name: '',
        lastname: '',
        id: ''
    }

    onNameChange = (event) => {
        this.setState({
            name: event.target.value
        })
    }

    onLastNameChange = (event) => {
        this.setState({
            lastname: event.target.value
        })
    }

    onEmailChange = (event) => {
        this.setState({
            id: event.target.value
        })
    }

    render() {
        return (
            <form>
                <input type = "text" name = "name" placeholder="name" onChange={this.onNameChange} />
                <input type = "text" name = "lastname" placeholder="last name" onChange={this.onLastNameChange} />
                <input type = "text" name = "id" placeholder="email address" onChange={this.onEmailChange}/>
                <button onClick = {props.clickHandler.bind(null, this.state)}>Send</button>
            </form>
        );
    }
}

Answer 2

import React, { Component } from 'react';

import './App.css';

import Form from './Components/Form';

class App extends Component {

    clickHandler = (data) => {
        console.log('data::', data );
    }

    render() {
        return (
            <div className="App">
                <h1>I am a React App </h1>
                <Form clickHandler = {this.clickHandler}/>
            </div>
        );
    }

}

export default App;

Answer 3

You need to pass down the clickHandler as a prop to your Form component

render() {
  return (
    <div className="App">
      <h1>I am a React App </h1>
      <Form onSubmit={this.clickHandler} />
    </div>
  )
}

Your are using React Uncontrolled form inputs so you need to handle the form onSubmit event

import React from "react"
const form = props => (
  <form
    onSubmit={e => {
      e.preventDefault()
      this.props.onSubmit(e)
    }}
  >
    <input type="text" name="name" placeholder="name" />
    <input type="text" name="lastname" placeholder="last name" />
    <input type="text" name="id" placeholder="email address" />
    <input type="submit" value="Send" />
  </form>
)
export default form

And in the clickHandleryou can now retrieve all values from the submit event like so

clickHandler = async e => {
  e.preventDefault()
  const name = e.target.elements[0]
  console.log(name + "was typed")
}

Edit: Added a way to see form values

Answer 4

First of all name your components as starting with a capital letter. For this kind of situations, you can keep the values in your main component's state, then update them via your callback functions which are being passed to the child component.

class App extends React.Component {
  state = {
    name: "",
    lastName: "",
    email: ""
  };

  clickHandler = e => {
    e.preventDefault();
    const { name, lastName, email } = this.state;
    const data = `Data is: ${name}-${lastName}-${email}`;
    alert(data);
  };

  changeHandler = e => {
    e.preventDefault();
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  render() {
    console.log(this.state);
    const { clickHandler, changeHandler } = this;
    return (
      <div className="App">
        <h1>I am a React App </h1>
        <Form clickHandler={clickHandler} changeHandler={changeHandler} />
      </div>
    );
  }
}

const Form = props => (
  <form>
    <input
      onChange={props.changeHandler}
      type="text"
      name="name"
      placeholder="name"
    />
    <input
      onChange={props.changeHandler}
      type="text"
      name="lastName"
      placeholder="last name"
    />
    <input
      onChange={props.changeHandler}
      type="text"
      name="email"
      placeholder="email address"
    />
    <button onClick={props.clickHandler}>Send</button>
  </form>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

For the inputs, you need an onChange handler, for your button you need an onClick handler as you thought. You can see the changing state in the console. When you hit the button it creates an object using your state values then fires the alert.