React js forms / validation? - forms

Question

I am new in developing application in react js and i am very confused which one is the best way / best practice for working with forms, and validating forms in react js other than controlled / uncontrolled method. Any guidance will be very helpful for me, Thank in advance.

Answer 1

Your form validation and handling form values becomes much easier if you use redux-form.
https://redux-form.com/7.3.0/docs/gettingstarted.md/

Answer 2

This is a sample react registration form,you ll be able to get an idea
Home.jsx
'use strict';
import React, {Component} from 'react';
import AddBook from './AddBook';
import axios from 'axios';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
books:[],
authors:[]
};
this.addBook = this.addBook.bind(this);
}
componentWillMount(){
axios.get(`http://localhost:8095/authors`)
.then(res=>{
const authors=res.data;
this.setState({authors});
console.log(res);
})
}
addBook(Name,ISBN,Author,Price,Year,Publisher){
axios.post(`http://localhost:8095/books`,{
Name:Name,
ISBN:ISBN,
Author:Author,
Price:Price,
Year:Year,
Publisher:Publisher
}).then(res=>{
console.log(res);
})
}
render() {
return <div>
<AddBook
addBook={this.addBook}
authors={this.state.authors}
/>
</div>
}
}
AddBook.jsx
'use strict';
import React, {Component} from 'react';
import { Button } from 'react-bootstrap';
export default class AddBook extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(event){
event.preventDefault();
this.props.addBook(
this.nameInput.value,
this.ISBNInput.value,
this.AuthorInput.value,
this.PriceInput.value,
this.YearInput.value,
this.PublisherInput.value
);
this.nameInput.value='';
this.ISBNInput.value='';
this.AuthorInput.value='';
this.PriceInput.value='';
this.YearInput.value='';
this.PublisherInput.value='';
}
render() {
return <div>
<form>
<header>Add Books</header>
<div><input placeholder="Name" ref={nameInput=>this.nameInput=nameInput}/></div>
<div><input placeholder="ISBN" ref={ISBNInput=>this.ISBNInput=ISBNInput}/></div>
<div><select ref={AuthorInput=>this.AuthorInput=AuthorInput}>
<option selected disabled >--author name--</option>
{
this.props.authors.map(author=>
<option key={author._id}>{author.fname}</option>
)
}
</select>
</div>
<div><input placeholder="Price" ref={PriceInput=>this.PriceInput=PriceInput}/></div>
<div><input placeholder="Year" ref={YearInput=>this.YearInput=YearInput}/></div>
<div><input placeholder="Publisher" ref={PublisherInput=>this.PublisherInput=PublisherInput}/></div>
<div><Button onClick={this.onSubmit}>Add Book</Button></div>
</form>
</div>
}
}
View.jsx
'use strict';
import React, {Component} from 'react';
import axios from 'axios';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
books:[]
};
}
componentWillMount(){
axios.get(`http://localhost:8095/books`).then(res=>{
const books=res.data;
this.setState({books});
console.log(books);
})
}
render() {
return <div>
<h2>This is the available book list</h2>
<div>
{
this.state.books.map(book =>
<div>
<span key={book._id}>Name:{book.Name}</span>
</div>
)
}
</div>
</div>
}
}
I am also new to React,so there may be redundancies in code.But this works fine.Hope this will help.