Updating the state array: A guide

How can the array be updated (similarly to the previous method) in order to trigger a re-render? One solution is to avoid only mutating the state, as this won’t cause a re-render. Alternatively, if you prefer to use state, it is recommended to use a component class.


Question:

I am currently developing an App using Reactjs. The App includes an API that retrieves data from an AWS database table and stores it in a state array. This array is then used to populate a table. However, I am facing difficulties in allowing users to update the values in the table and save those changes. I have implemented an update method, but it throws an error stating that I am unable to update the state array or complains about the undefined column array.

I have the following code:

export default function Complaints(props) {
    const [complaint, setComplaint] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isInEditMode, setIsEditMode] = useState(false);
    const [defaultValue, setDefaultValue] = useState("");
    var columsArr = [
        { title: 'Customer ID', field: 'id' },
        { title: 'Issue', field: 'complaintName' },
        { title: 'Description', field: 'complaintDescription'},
        { title: 'Order ID', field: 'complaintOrderId'},
        { title: 'Submitted', field: 'createdAt'},
        { title: 'Updated', field: 'updatedAt'},
        { title: 'Admin Comment', field: 'adminComment'},
    ];
    useEffect(() => {
        async function onLoad() {
            if (!props.isAuthenticated) {
                return;
            }
            try {
                const complaint = await loadComplaint();
                setComplaint(complaint);
                setState({
                    columns: [state.columns, ...columsArr],
                    complaint: [...state.complaint, ...complaint]
                });
                console.log(complaint)
            } catch (e) {
                alert(e);
            }
            setIsLoading(false);
        }
        onLoad();
    }, [props.isAuthenticated]);
    function loadComplaint() {
        return API.get("kleen", "/Complaint");
    }
    // function edit(adminComment) {
    //     setIsEditMode(true);
    //     setDefaultValue(adminComment);
    //     console.log("value is"+ adminComment);
    // }
    // function updateComplaint() {
    //     return API.put("kleen", `/Complaint/${props.}`);
    // }
    const [state, setState] = React.useState({
        columns: [],
        complaint: []
});
    return (
        
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve();
                            if (oldData) {
                                let key = 1;
                                setState(prevState => {
                                    complaint: prevState.complaint.map(el => el.key === key ? {...el, adminComment: "testing"}: el)
                                    // const data = [...prevState.data];
                                    // data[data.indexOf(oldData)] = newData;
                                    // return { ...prevState, data };
                                });
                            }
                        }, 600);
                    }),
            }}
        />
    );
}

As I am a beginner in Reactjs, I would greatly appreciate any assistance provided.


Solution 1:

One way that you can achieve is by:

  1. Begin by storing the state within a variable.
  2. Update the
    array variable
  3. Bring the variable back to its previous state.


Solution 2:


For utilizing state, it is preferable to utilize the component class.

export default class Complaints extends Component {
//assign initial value to state
state={
    propsObj : this.props
}
...
}

To utilize a component, it is necessary to import it.

import React, { Component } from "react";

In the component class, one should utilize ”

this.props

” rather than ”

props

“.

If you wish to alter the state at a later time, simply employ the code

this.setState({ propsObj: 'some thing new'});

.

Frequently Asked Questions