Unable to use onClick event ReactJS - 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

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.

Answer 2

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 3

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 4

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