Update state in React: array element nested in Object

Question

I'm trying to build onChange search feature. In suggestion list, my state like this:

results: {
    page: 1,
    results: [
       {value: 'popularity.desc', label: 'Popularity Descending'},
       {value: 'popularity.asc', label: 'Popularity Ascending'},
       {value: 'new value', label: 'new label'},
       {value: 'vote_average.desc', label: 'Rating Descending'}
    ]
}

When the user picks {value: 'new value', label: 'new label'} object.

How can I shift object to the first index of results array of state?

For example: After Object was picked. The state should be like this:

results: {
    page: 1,
    results: [
       {value: 'new value', label: 'new label'},
       {value: 'popularity.desc', label: 'Popularity Descending'},
       {value: 'popularity.asc', label: 'Popularity Ascending'},
       {value: 'vote_average.desc', label: 'Rating Descending'}
    ]
}

My idea is using spread operator and filter but I don't know how to implement that.

Select Item method:

onSuggestionSelected = (event, {suggestion, suggestionValue }) => {

    console.log('Selected', suggestion);  // {value: 'new value', label: 'new label'}

    if (suggestion.media_type === 'movie') {
        this.navigate('/search/movie', suggestionValue, suggestion);
    } else if (suggestion.media_type === 'tv') {
        this.navigate('/search/tv', suggestionValue, suggestion);
    } else {
        this.navigate('/search', suggestionValue, suggestion);
    }
};

After selected, it will navigate:

navigate = (pathname, queryValue, resultValue) => {

    // ResultValue is that Object that I want to shift first.

    this.props.history.push({ 
        pathname, 
        search: `?query=${queryValue}`, 
        state: {results: this.state.data}});
};

RIYAJ KHAN · Accepted Answer · 2018-07-02 10:17:43Z

2

    //filtered the remaining item
    let remainValue = result.filter((obj, key) => obj.value != suggestion.value);
    //merge here 
    let newResult = [suggestion, ...remainValue]; //it will contain reordered item

answered Jul 2, 2018 at 10:17

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

loelsonk · Accepted Answer · 2018-07-02 10:15:25Z

At first we need to find an index using findIndex, then filter current state to exclude the object containing selected data.

Last thing we need to do is to combine results into one array using spread operator ....

Example:

const currentState = [
       {value: 'popularity.desc', label: 'Popularity Descending'},
       {value: 'popularity.asc', label: 'Popularity Ascending'},
       {value: 'new value', label: 'new label'},
       {value: 'vote_average.desc', label: 'Rating Descending'}
];


const selectedValue = {value: 'new value', label: 'new label'};
const onSelectionChange = (selected) => {
  const selectedIndex = currentState.findIndex(({ value }) => value === selected.value);
  const selectedItem = currentState[selectedIndex];
  const stateExcludedItem = currentState.filter(({ value }) => value !== selected.value);
  const newState = [ selectedItem, ...stateExcludedItem ]
 
  // this.setState
  return newState;
}


const result = onSelectionChange(selectedValue);

console.log(result);

Tholle · Accepted Answer · 2018-07-05 17:56:06Z

You could find the index of the result you want to put first in the array, and then put that first followed by what used to be before and after the result in the array.

Example

class App extends React.Component {
  state = {
    results: {
      page: 1,
      results: [
        { value: "popularity.desc", label: "Popularity Descending" },
        { value: "popularity.asc", label: "Popularity Ascending" },
        { value: "new value", label: "new label" },
        { value: "vote_average.desc", label: "Rating Descending" }
      ]
    }
  };

  putResultFirst = result => {
    this.setState(previousState => {
      const { results } = previousState.results;
      const resultIndex = results.indexOf(result);

      return {
        results: {
          ...results,
          results: [
            result,
            ...results.slice(0, resultIndex),
            ...results.slice(resultIndex + 1)
          ]
        }
      };
    });
  };

  render() {
    return (
      <div>
        {this.state.results.results.map(result => (
          <div key={result.id} onClick={() => this.putResultFirst(result)}>
            {result.value} {result.label}
          </div>
        ))}
      </div>
    );
  }
}

Acorn · Accepted Answer · 2018-07-02 20:13:10Z

To move the selected item to the first position, you can use the Array.filter method to get the unselected items as an array, and build a new results array:

selectedItem = this.state.results.results[clickedIndex]
unselectedItems = this.state.results.results.filter((item, index) => clickedIndex !== index)

Because the "results" in state is an object. To update an object in the state, you should make an copy of the current results object to create a new object, so that the state will be updated.

results = {...this.state.results, results: [selectedItem, ...unselectedItems]}

You just want to move the selected item to the top of the results array, therefore you need just transfer the index of selected item to the event handler, which will call the setState method.

The example codes:

class App extends React.Component {
    state = {
        results: {
            page: 1,
            results: [
                {value: 'popularity.desc', label: 'Popularity Descending'},
                {value: 'popularity.asc', label: 'Popularity Ascending'},
                {value: 'new value', label: 'new label'},
                {value: 'vote_average.desc', label: 'Rating Descending'}
            ]
        }
    };

    handelClick = (clickedIndex) => {
        if(clickedIndex === 0) {
            return;
        }
        let selectedItem = this.state.results.results[clickedIndex],
            unselectedItems = this.state.results.results.filter((item, index) => clickedIndex !== index),
            results = {...this.state.results, results: [selectedItem, ...unselectedItems]};
        this.setState({results})
    };

    render() {
        return <ul>
            {this.state.results.results.map((item, index) =>
                <li key={item.label} onClick={this.handelClick.bind('', index)}>{item.label}</li>)
            }
        </ul>
    }
}

const renderFilterList = () => {
    ReactDOM.render(<App />, document.getElementById('react-app'));
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react-app"></div>

Collectives™ on Stack Overflow

Update state in React: array element nested in Object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related