CODEWITHSUNDEEP
reactjs
karthik
karthik

Reputation: 21

TypeError: Cannot read property 'edit' of undefined in reactjs

I am designing and developing CRUD API using react js. I am getting an error in edit API. I have gone through different solutions in stackoverflow , but i am not getting the correct answer.

Below is the code:

                              <ul className="list-inline mb-0">
                                {this.props.params.action_permission.edit?
                                    <li className="list-inline-item mr-3" id="edit">
                                        <Link to={{
                                            pathname: '/task-category-edit',
                                            state: action_cat.action_id
                                        }} id={"edit" + action_cat.action_id}>
                                            <i className="fas fa-edit mr-1"></i>Edit
                                            <UncontrolledTooltip placement="top" target={"edit" + action_cat.action_id}>
                                                Edit
                                            </UncontrolledTooltip>
                                        </Link>
                                    </li>
                                    :null}
                                   </ul>

I am getting an error like this:

TypeError: Cannot read property 'edit' of undefined


handleStatusClick(id, status) {
    if (this.props.params.action_permission.edit) {
        let user = JSON.parse(sessionStorage.getItem("userDetail"))

        let ustatus = 0
        if (status) {
            ustatus = 0
        } else {
            ustatus = 1
        }
        const requestOptions = {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }),
            body: JSON.stringify({ action: 'action_update', action_id: id, action_status: ustatus, updated_by: user.user_name })
        };
        console.log(requestOptions)
        fetch(API_URL, requestOptions)
            .then(res => res.json())
            .then((data) => {
                console.log(data)
                if (data.status) {
                    window.location = '/task-category-list'
                    // this.setState({ users: data.params })
                }
            })
            .catch(console.log)
    }
}

Where i am doing mistake? Any help would be appreciated.

Upvotes: 0

Views: 397

Answers (1)

Yatin Gaikwad
Yatin Gaikwad

Reputation: 1200

action_permission seems to be undefined, try adding one more if condition:

<ul className="list-inline mb-0">
    {this.props.params.action_permission !== undefined 
 && this.props.params.action_permission.edit !== undefined ?
         <li className="list-inline-item mr-3" id="edit">
             <Link to={{
                 pathname: '/task-category-edit',
                 state: action_cat.action_id
              }} id={"edit" + action_cat.action_id}>
              <i className="fas fa-edit mr-1"></i>Edit
              <UncontrolledTooltip placement="top" target={"edit" + action_cat.action_id}>
                  Edit
              </UncontrolledTooltip>
             </Link>
          </li>
 : null}

and

handleStatusClick(id, status) {
    if (this.props.params.action_permission && this.props.params.action_permission.edit) {
        let user = JSON.parse(sessionStorage.getItem("userDetail"))

        let ustatus = 0
        if (status) {
            ustatus = 0
        } else {
            ustatus = 1
        }
        const requestOptions = {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }),
            body: JSON.stringify({ action: 'action_update', action_id: id, action_status: ustatus, updated_by: user.user_name })
        };
        console.log(requestOptions)
        fetch(API_URL, requestOptions)
            .then(res => res.json())
            .then((data) => {
                console.log(data)
                if (data.status) {
                    window.location = '/task-category-list'
                    // this.setState({ users: data.params })
                }
            })
            .catch(console.log)
    }
}

Upvotes: 2

Related Questions