Unable to use onClick event ReactJS

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.

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

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;

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>
        );
    }
}