CODEWITHSUNDEEP
reactjsstate
andika_kurniawan
andika_kurniawan

Reputation: 567

React JS - How to set state of variable inside variable?

I want to set state of this form :

this.state = {
  filter: {
    search: null,
    brands: null,
    price: null
  }
}

How to set value for search / brands / price ?

Upvotes: 0

Views: 7017

Answers (8)

mohammad issa
mohammad issa

Reputation: 11

let newfilter = Object.assign({}, this.state.filter)

newfilter.search ="value";
newfilter.brands ="value";
newfilter.price ="value";

this.setState({
    filter:newfilter
})

Upvotes: 1

David L. Walsh
David L. Walsh

Reputation: 24824

I recommend avoiding nested objects and keeping your state flat. e.g.

this.state = {
  brandsFilter: null,
  priceFilter: null,
  searchFilter: null,
};

Component state in react is really nothing more than simple key-value pairs; that's what setState supports. Sure you can have nested objects if you really want. But as the other answers demonstrate, supporting such an approach can be needlessly complex.

Upvotes: 2

LearnToCode
LearnToCode

Reputation: 216

You can access the search, brands, price by using:

this.setState({
    filter.search = true,
    filter.brands = 'stackoverflow',
    filter.price = 1400
})

and to access it, just like usual state access (this.state.filter.search).

Upvotes: -5

charul Tiwari
charul Tiwari

Reputation: 31

this.setState({
filter: {
      ...this.state.filter,
      search: "new search", 
      brands: 'value',
      price: 'value'
   }
});

You may try this with Spread Operator. If you need to preserve the previous filter value. other wise you can,

this.setState({
    filter: {
          search: "new search", 
          brands: 'value',
          price: 'value'
       }
    });

Upvotes: 1

TLadd
TLadd

Reputation: 6894

The key is that you don't want to ever mutate a value in state. As a result, you must copy the filter object before passing it to setState. Example:

onSearchChange(value) {
  this.setState((state) => {
    return {
       filter: {
         ...state.filter,
         search: value
       }
  })
}

Note that I am passing a function to setState. Since the next value of state relies on the previous value, you want to use an updater functions, as the setState docs recommend.

In general, it is nicer if you can keep your state flat. So rather than having a filter object in state, your shape could just be

this.state = {
   search: null,
   brands: null,
   price: null,
}

In which case the above onSearchChange function would just be

onSearchChange(value) {
  this.setState({search: value})
}

Definitely a lot easier on the eyes.

Upvotes: 2

Viet Phan
Viet Phan

Reputation: 2119

You should avoid to mutate React state directly, there are some functions can do immutable jobs for you (ex Object.assign):

const currentFilter = this.state.filter;
const newFilter = Object.assign({}, currentFilter, {search: "new search", brands: [], price: 100});
this.setState({filter: newFilter});

ES 6:

const currentFilter = this.state.filter;
this.setState({
   filter: {
      ...currentFilter,
      search: "new search",
      brands: []
   }
});

Upvotes: 1

Ahsan Ali
Ahsan Ali

Reputation: 5135

Do the following: 

this.setState({
  filter: {
    search: 'value',
    brands: 'value',
    price: 'value'
  }
})

Upvotes: 2

Nima
Nima

Reputation: 190

you should use the setState function, you can set the filter with updated data like so 

const newFilter = {...};
this.setState({filter: newFilter});

Upvotes: 1

Related Questions