React js forms / validation?

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

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.

Answer 2

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/