0

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.

2 Answers 2

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/

Sign up to request clarification or add additional context in comments.

Comments

0

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.

1 Comment

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. Thanks for improving the answer's reference value and making it more understandable!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.