How can I pass array to object in the state in React.js

Question

I'm making a list using React.js. This application will contains two lists and a user can create a list with some items.

For instance,

1) A list of lists (eg 1) Fruit list 2) Vegetable list)

2) A list of items( eg 1) Fruit -- 1 Apple, [2] Banana, [3] Orange )

The data of list is stored as array and list of items is stored array in object. What I cannot figure it out is to pass array to object in the state.

Here is my code: App.js

class App extends Component {

 constructor() {
 super();
 this.state = {
 lists: [], // this holds the name of each list
 items: {} // this property names of this object are the names of the lists; their values are arrays of the items in each list
 };
}

handleAddList(list) {
   let lists = this.state.lists;
   lists.push(list);
   let item = [lists] // how can I pass array to object?? 
   this.setState({
       lists: lists,
       items: item
   })
  console.log(this.state)
}

handleAddItem(item) {
    let items = this.state.items;
    items.push(item);
    this.setState({
       items
    })
 }
render() {
   return (
    <div className="App">

     <AddList addList={this.handleAddList.bind(this)} />
     <div id="listsDiv" className="List">
        <Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />
     </div>
     </div>
    );
   }

 }

AddList.js

class AddList extends Component {

 constructor(){
     super();
     this.state = {
        newList : {}
     }
 }

handleSubmit(e) {
     e.preventDefault(); // this prevents the page from reloading -- do not delete this line!

    if(this.refs.id.value ===''){
        alert('Add list')
    } else {
        this.setState({
            lists: this.refs.id.value
        }, function(){
        this.props.addList(this.state.lists);
   });
   }
 }

render() {
return (
  <div id="addListDiv">
  <form onSubmit={this.handleSubmit.bind(this)}>
  <div id='addList'>
  <label>What will be on your next list?&nbsp;
  <input type='text' ref='id' id='newID'></input>
  </label>
  </div><br />
  <input type='submit' value='Create List' />
  </form>
  </div>
);
}
}

Hemerson Carlin · Accepted Answer · 2017-10-09 15:20:36Z

1

If this is a list, you should initialize it as an empty array []. Also, if this is a list of list (as you say), maybe keep them in only one state prop where each key maps to a specific list type.

this.state = {
  lists: {
    fruits: ['apple', 'banana', 'orange'],
    vegetables: ['tomato', 'carrot', ...],
  }
}

So every time you add a new item to any of the lists, state manipulation gets easier:

addItem(type, item) {
  this.setState({
    lists: {
      ...this.state.lists,
      [type]: [
        ...this.state.lists[type],
        item,
      ]
    }
  })
}

answered Oct 9, 2017 at 15:20

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

4 Comments

aaayumi Over a year ago

list and item should be separated. in this case, can I do something like ` this.setState({ lists : this.state.lists, items: ...this.state.lists})` ? I tried it in my code but it didn't work..

Hemerson Carlin Over a year ago

in this case that would be: this.setState({ items: [...this.state.lists ]}). Why do you keep the same value in two properties?

aaayumi Over a year ago

I tried your code and I got this error : ` {lists: Array(1), items: {…}} items : {} lists : ["fruits"] proto : Object ` Still items: {} is empty. I want to have ` items: { fruits : [ ] } `

aaayumi Over a year ago

I want to create a list of items inside items. That's why I keep the same value. @mersocalin

Collectives™ on Stack Overflow

How can I pass array to object in the state in React.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related