React: Rendering state array

Question

I'm making a search form with React including a multiple select tag which adds selected options into a state as an array.

How do I successfully render selected items as a removable buttons into a box div?

class Search extends React.Component {
    constructor(props) {
        super(props)
        this.state = { selected: [] }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange = e => {
        let item = e.target.value
        let selected = this.state.selected
        if (selected.includes(item)) {
            return null
        } else {
            selected.push({ item })
            this.setState({ selected: item })
        }
    }

    render() {
       const items = [ item1, item2, item3,... ]

    return(
       .....
       <select
           multiple={true}
           value={this.state.value}
           onChange={this.handleChange}>
           {items.map(item => (
              <option
                 key={item}
                 value={item}>
                 {item}
             </option>
           ))}
      </select>
      <div className="box">
      </div>

ravibagul91 · Accepted Answer · 2019-08-18 07:10:55Z

1

By doing this,

selected.push({ item })

You are actually pushing object to array, which should be just

selected.push( item )  //push item directly

Also you are setting state incorrectly,

this.setState({ selected: item })

You should only have,

this.setState({ selected })

And finally you can iterate over selected array like this,

<div className="box">
  { this.state.selected && this.state.selected.length > 0 && this.state.selected.map(selected=> <button key={selected}>{selected}</button>)
  }
</div>

Demo

edited Aug 18, 2019 at 7:10

answered Aug 18, 2019 at 7:04

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

1 Comment

twisturb Over a year ago

Omg this was so dumb mistake from me. facepalm Thank you, this worked!

Lazar · Accepted Answer · 2019-08-18 06:42:44Z

0

You can use the same approach as with your select.

For example:

<div className="box">
   { 
     this.state.selected.map(item => (
        <Button ...>
     ))
   }
</div>

answered Aug 18, 2019 at 6:42

Lazar

6901 gold badge5 silver badges19 bronze badges

1 Comment

twisturb Over a year ago

I already tried this, but it says this.state.selected.map is not a function.

Omer · Accepted Answer · 2019-08-18 08:18:11Z

0

Make the item as object

const items = [ {item1:item1, isSelected: false}, {item2, isSelected: false},... ]

And when item select - toggle isSelected to true, and make some button if the item object.isSelected === true

answered Aug 18, 2019 at 8:18

Omer

3,5262 gold badges21 silver badges21 bronze badges

Collectives™ on Stack Overflow

React: Rendering state array

3 Answers 3

1 Comment

1 Comment

Make the item as object

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Make the item as object

Comments

Your Answer

Sign up or log in

Post as a guest

Related