TypeError: Cannot convert undefined or null to object React Validation

Question

I have used React validation library

https://www.npmjs.com/package/react-validation

If I visit my page from any other page, it does not give any error. but when I refresh the page, it gives an error

TypeError: Cannot convert undefined or null to object

Please suggest an idea if anybody has faced this issue before.

Code:

import React from 'react';

import {
    Card,
    CardBody,
    CardTitle,
    Row,
    Col,
    FormGroup,
    Label,
    Alert
  } from 'reactstrap';
import Input from 'react-validation/build/input';
import Button from 'react-validation/build/button';
import Form from 'react-validation/build/form';
import axios from 'axios';
import api from '../../config/api';
import messages from '../../config/messages';
import Select from 'react-validation/build/select';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const required = (value, props,components) => {

    if(components.formReset!=undefined)
    {
        if (!components.formReset[0].value && (!value || (props.isCheckable && !props.checked))) {

        return <span className="text-danger is-visible">{messages.required}</span>;
        }
        else if(components.formReset[0].value)
        {
            return <span className="text-danger is-visible"></span>;
        }
    }

}
;


class View extends React.Component {
    constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
        this.sendReply = this.sendReply.bind(this);
        this.toggle = this.toggle.bind(this);
        this.onStatusChange=this.onStatusChange.bind(this);
        this.handleEditorChange=this.handleEditorChange.bind(this);
        this.state = {
             response:null,
             loading: false,
             message:'',
             status:'',
             attachment1:[],
             status_list:[],
             formReset:true

         };

    }


    componentDidMount() {

        this.setState({formReset:true});


    }

    onStatusChange(event) {
        this.setState({"formReset":false});
        this.setState({
                status: event.target.value
            });

    }

    handleEditorChange(data) {
        this.setState({"formReset":false});
        this.setState({ message:data });
    }

    sendReply()
    {

            /*** code after form submission***/

    }

    toggle() {


    }

    onInputChange(event) {
        event.preventDefault();
        this.setState({"formReset":false});
        this.setState({
                [event.target.name]: event.target.value
            });


    }




    render() {
        var _this = this;
        return (
            <aside className="customizer">
                {/*--------------------------------------------------------------------------------*/}
                {/* Toggle Customizer From Here                                                    */}
                {/*--------------------------------------------------------------------------------*/}

                <div className="customizer-body pt-3">
                <div>

                    {/* --------------------------------------------------------------------------------*/}
                    {/* Start Inner Div*/}
                    {/* --------------------------------------------------------------------------------*/}
                    <Row>

                    <Col md="12">
                        <Card>
                            <CardTitle className=" border-bottom p-3 mb-0">

                            </CardTitle>
                            <CardBody>

                                <Form ref={c => {
                                    this.replyform = c;
                                    }}>


                                    <Input type="hidden" name="formReset" id="formReset" value={this.state.formReset} />

                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Reply *</Label>
                                            <Col sm="10">

                                                <CKEditor
                                                    editor={ ClassicEditor }
                                                    data={this.state.message}
                                                    config={ {

                                                        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
                                                    } }
                                                    onChange={ ( event, editor ) => {
                                                        const data = editor.getData();
                                                        this.handleEditorChange(data);

                                                    } }

                                                />

                                            </Col>
                                        </Row>
                                    </FormGroup>
                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Status</Label>
                                            <Col sm="10">

                                                <Select id="status" className="custom-select form-control" name="status" onChange={this.onStatusChange} value={this.props.status_id: null}>
                                                    <option value="">Select</option>
                                                    {this.state.status_list.map((status, index) => {

                                                        return (

                                                        <option key={index} value={status.value}>{status.label}</option> 

                                                        );
                                                    })}
                                                </Select>


                                            </Col>
                                        </Row>
                                    </FormGroup>
                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Attachments</Label>
                                            <Col sm="10">

                                                    <Input
                                                    type="file"
                                                    id="attachment1" name="attachment1[]"
                                                    onChange={this.onInputChange} 
                                                    multiple="multiple"
                                                    />

                                            </Col>
                                        </Row>
                                    </FormGroup>

                                    <div className="border-top pt-3 mt-3 d-flex no-block"> 

                                        <Button type="button" onClick={this.sendReply} className="btn btn-dark mr-2 ml-auto">
                                        Send Reply
                                        </Button>

                                    </div>
                                </Form>
                            </CardBody>
                        </Card>
                    </Col>
                    </Row>
                    {/* --------------------------------------------------------------------------------*/}
                    {/* End Inner Div*/}
                    {/* --------------------------------------------------------------------------------*/}
                </div>
                </div>
            </aside>
        );
    }
}
export default View;

Error image:

It's normal react form which works if i go to that page from some other page(redirected). i get this error on page refresh only!!! — Khushbu
– Khushbu, Commented Jun 11, 2019 at 11:56
It would be quiet nice if you give us at least your whole component, or at best post a working example at Stackbliz — Elias
– Elias, Commented Jun 11, 2019 at 14:59

Hassan Ali Shahzad · Accepted Answer · 2021-02-23 15:29:18Z

7

Really crazy error:

import { Formik, Form, Field } from 'formik';

above required initial values on any cost if you dont want to give initial value initialize it with empty.for example

const initialValues = {
    firstname: "",
    lastname: ""
}

and then in <Formik tag

initialValues={initialValues}

answered Feb 23, 2021 at 15:29

Hassan Ali Shahzad

2,7521 gold badge32 silver badges35 bronze badges

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

Comments

Zeeshan Siddique · Accepted Answer · 2021-12-20 17:01:25Z

1

after upgrading react & it's packages i was facing above issue & it's resolved by Hassan Ali Shahzad answer, code that may help some one

<Formik
  enableReinitialize={true}
  initialValues={{
    heatmaps: '',
  }}

edited Dec 20, 2021 at 17:01

answered Dec 20, 2021 at 16:54

Zeeshan Siddique

194 bronze badges

Comments

Sanan Ali · Accepted Answer · 2021-07-02 11:06:47Z

0

I was facing the same error using formik

After debugging I came to know I had a typo in the initialValues object name. Make sure you are having the same object for initalValues that you have defined. In my case I had timeCapturesInitialValues object but used timeCapturesInitailValues in the Formik prop.

answered Jul 2, 2021 at 11:06

Sanan Ali

3,5102 gold badges33 silver badges44 bronze badges

Comments

Mallappa Bijjur · Accepted Answer · 2019-06-12 06:15:08Z

-5

if your return statement is null at any given point this error occurs. Example:

const obj = null;

return(

obj

);

Please check your code .

answered Jun 12, 2019 at 6:15

Mallappa Bijjur

13 bronze badges

2 Comments

Khushbu Over a year ago

No i do not have any return statement which can return null in my code.

Leo Over a year ago

Returning null is not an issue. Treating something which is undefined or null like an object and trying to access properties from it is the issue.

Collectives™ on Stack Overflow

TypeError: Cannot convert undefined or null to object React Validation

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related