React JS Form button calling - reactjs

Question

I am try trying to submit the form once the button is clicked, but the function is not triggering in React.
The only enquiry is on the submit button onclick=submitform.
So I can get the value and update it to the json arry
import React, { Component } from "react";
class Createcomponent extends Component {
constructor() {
super()
this.state={
firstname:"",
lastname:"",
phonenumber:""
}
this.ontextchange=this.ontextchange.bind(this)
this.submitform=this.submitform.bind(this)
}
componentDidMount() {
console.log("Component Mounted");
}
ontextchange(event) {
if(event.target.id==='fname') {
this.setState({firstname: event.target.value})
}
}
submitform() {
alert("trigger");
//console.log(this.state)
}
render(){
return (
<div>
<label for="fname">First name:</label>
<input type="text" id="fname" onChange={this.ontextchange} value={this.state.firstname} name="fname"/><br/>
<label for="lname">Last name:</label>
<input type="text" id="lname" onChange={this.ontextchange} value={this.state.lastname} name="lname"/><br/>
<label for="lname">PhoneNumber:</label>
<input type="text" id="phone" onChange={this.ontextchange} value={this.state.phonenumber} name="lname"/><br/>
<input type="submit" value="Submit"/>
<button onClick={this.submitform}>Submit</button>
</div>
);
}
}
export default Createcomponent

Answer 1

You have two "Submit" buttons. Clicking the right "Submit" button triggers the alert correctly using your code as it is.
The left "Submit" button, which is setup as a form submit by setting type = submit, doesn't do anything because there actually is no <form> in use. Setting up a form as I've added it to your code below, the left "Submit" button works too. I've also created this CodeSandbox for demonstration.
import React, { Component } from "react";
class Createcomponent extends Component {
constructor() {
super();
this.state = {
firstname: "",
lastname: "",
phonenumber: ""
};
this.ontextchange = this.ontextchange.bind(this);
this.submitform = this.submitFormButton.bind(this);
}
componentDidMount() {
console.log("Component Mounted");
}
ontextchange(event) {
if (event.target.id === "fname") {
this.setState({ firstname: event.target.value });
}
}
submitFormButton() {
alert("trigger");
//console.log(this.state)
}
submitFormOnSubmit(e) {
e.preventDefault();
alert("trigger");
}
render() {
return (
<form onSubmit={this.submitFormOnSubmit}>
<label for="fname">First name:</label>
<input
type="text"
id="fname"
onChange={this.ontextchange}
value={this.state.firstname}
name="fname"
/>
<br />
<label for="lname">Last name:</label>
<input
type="text"
id="lname"
onChange={this.ontextchange}
value={this.state.lastname}
name="lname"
/>
<br />
<label for="lname">PhoneNumber:</label>
<input
type="text"
id="phone"
onChange={this.ontextchange}
value={this.state.phonenumber}
name="lname"
/>
<br />
<input type="submit" value="Submit" />
<button onClick={this.submitFormButton}>Submit</button>
</form>
);
}
}
export default Createcomponent;

Answer 2

Make sure to use htmlFor instead of for in React on your label element.