why nested array object not work in react component

Question

There is a grid component what receive a prop as searchElement to rendering search segment of the grid.some dropdowns options is empty and should fill by async request after component mounted. after I call async fetch in componentDidMount and assign new options to searchElements something is wrong because in grid component console.log show searchElements[0] have a property as options which contains array with many elements but when I do console.log searchElements[0].options it's empty !!!!!

let SearchTerms = [
    {
        key    : "supervisor",
        label  : "Supervisor",
        type   : GRID_DROPDOWN_TYPE,
        options: [],
        col    : 2
    },
.
.
.
    class CommentComponent ..... {
    ...

async componentWillMount() {
    let GetSupervisors = await fetchWith(`${entry_point}/users`, "GET", {roles: 5}, dispatch, true);
    if (GetSupervisors.ok && GetSupervisors.result['hydra:totalItems'] > 0) {
                    Supervisors = GetSupervisors.result['hydra:member'];
    }

    SearchTerms[0].options = Supervisors.map(data => ({
         value: data.id,
         label: data.fullname
    }));
}

then I'll pass SearchTerms to GridComponent

<GridComponent searchElements={SearchTerms} ...

Now in GridComponent :

getSearchElements = () => {
        const {searchElements, preloader, process, searchMode} = this.props;
        console.log(searchElements[0]);
        let SearchElements = [];

Problem is here : When I come to CommentComponent through Route Click everything is ok but When I refresh the page SearchElement[0].options is empty :(

also use componentDidMount instead of deprecated componentWillMount — Junius L
– Junius L, Commented May 5, 2019 at 6:27

Scc · Accepted Answer · 2019-05-05 06:28:27Z

1

Use SearchTerms as the state

class CommentComponent ..... {
 state = {
    SearchTerms: [
    {
        key    : "supervisor",
        label  : "Supervisor",
        type   : GRID_DROPDOWN_TYPE,
        options: [],
        col    : 2
    },
}
.
.
.

  async componentWillMount() {
    let GetSupervisors = await fetchWith(`${entry_point}/users`, "GET", {roles: 
 5}, dispatch, true);
    if (GetSupervisors.ok && GetSupervisors.result['hydra:totalItems'] > 0) {
                    Supervisors = GetSupervisors.result['hydra:member'];
    }

   const newSearchTerms = [...this.state.SearchTerms]
    newSearchTerms[0].options = Supervisors.map(data => ({
         value: data.id,
         label: data.fullname
    }));
    this.setState({SearchTerms:newSearchTerms })
}

answered May 5, 2019 at 6:28

Scc

5265 silver badges5 bronze badges

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

3 Comments

Junius L Over a year ago

you are using componentWillMount which is deprecated.

Scc Over a year ago

@JuniusL. Good advice, compoentWillMount will be deprecated, it is recommended to use componentDidMount

Hamid Over a year ago

It's worked. you gotta be kidding meeee, I'v tried every solution also as a state but didn't work since yesterday . now it's work . :) .

Collectives™ on Stack Overflow

why nested array object not work in react component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related